如何解决两个li之间的缝隙的问题:
在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题:
HTML如下:
<span class="c1mChanger">
<ul>
<li>仅产品</li>
<li>仅商品</li>
</ul>
</span>
CSS如下:
.c1mChanger{
width: 120px;
height: 30px;
}
.c1mChanger ul{
width:120px;
height: 30px;
}
.c1mChanger ul li{
display: inline-block;
text-align: center;
line-height: 30px;
}
.c1mChanger ul li:first-child{
border: 1px solid #;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.c1mChanger ul li:last-child{
border: 1px solid #;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
显示的效果如下:
aaarticlea/png;base64,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" alt="" />
明显两个li之间有一个缝隙,经过仔细检查发现有如下3种解决方式:
1、在css样式里要使用margin:0;padding:0去除浏览器的默认值; *{margin:0;padding:0;} /*通配符margin和padding都设为0*/
2、在li设置:float: left; list-style: none;
3、那个距离可能是空白节点,可以把li连着写,不要换行
总结如下:
保险起见,最好是三者都写上。