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;        }        

: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;        }        

加了 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;        }        

效果图