html && css 解决li浮动边框为2的问题
思路
问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px。(例:分页模块)原因 => 就是浮动后的 li 会使粘着在一起,所以就出现 1+1=2解决方法:1. 设置 li => margin-left: -1px; 利用重叠,达到1px的效果。如果需要:hover ,则在 :hover里面加上 position: relative;就可以了。因为相对定位比标准流高一级,浮在上面。这样就可以达到显示被压住的边框了。2. 如果父元素本来就有 相对定位了,那么我们就可以使用 z-index:1 让他显示出来。*注意:方法可能不止以上2种,如有其他方法可联系小棕熊QVQ,让小棕熊与你一起学习更多的方法。
问题图
方法1 html代码
html && css 解决浮动坍塌问题方法 * { padding: 0; margin: 0; }.clearfix::after { content: ''; display: block; height: 0; visibility: hidden; clear: both;} .container { width: 300px; margin: 50px auto; text-align: center; } .container li { float: left; padding: 5px 10px; margin-left: -1px; /* 解决方法 */ list-style: none; border: 1px solid #00f; box-sizing: border-box; }
1 2 3 4 5 6 7 8 9
:hover 效果上
html && css 解决浮动坍塌问题方法 * { padding: 0; margin: 0; }.clearfix::after { content: ''; display: block; height: 0; visibility: hidden; clear: both;} .container { width: 300px; margin: 50px auto; text-align: center; } .container li { float: left; padding: 5px 10px; list-style: none; margin-left: -1px; border: 1px solid #00f; box-sizing: border-box; } .container li:hover { position: relative; border: 1px solid #0ff; }
1 2 3 4 5 6 7 8 9
加了 position: relative 和没有添加 position: relative 的对比图
方法3 z-index:1
html && css 解决浮动坍塌问题方法 * { padding: 0; margin: 0; }.clearfix::after { content: ''; display: block; height: 0; visibility: hidden; clear: both;} .container { width: 300px; margin: 50px auto; text-align: center; } .container li { position: relative; float: left; padding: 5px 10px; list-style: none; margin-left: -1px; border: 1px solid #00f; box-sizing: border-box; } .container li:hover { z-index: 1; border: 1px solid #0ff; }
1 2 3 4 5 6 7 8 9
效果图