1.ul的li要同一行排列,
如果用display: inline-block;
在html的li换行时会产生3px的间距。
解决办法:
(1)改变html结构
<ul>
<li>
item1</li><li>
item2</li><li>
item3</li><li>
item4</li><li>
item5</li>
</ul>
(2)使用white-space: nowrap;
ul{
white-space: nowrap;//规定段落中文本不换行
li{
display: inline-block;
}
}
(3)用float: left; (然后ul添加清除浮动)li浮动引起ul高度坍陷的解决方法
//清除浮动代码
@mixin clear_fix() {
*zoom: 1;
&:after {
content: "\200B";
display: block;
height: 0;
clear: both;
}
}
ul{
li{
float:left;
}
@include clear_fix();
}
(4)设置父元素字体为0
第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。
ul {
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
font-size: 12px;
}