当我们让多个inline-block元素并排显示时,会发现它们之间是存在间距的。
主要代码如下:
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
li{
display: inline-block;
}
其实,不仅inline-block元素,将li元素的display类型改成inline
,会发现inline元素也是会产生此种间距的。
去除间距有如下方法:
1. 使前一个li元素结束标签和后一个li元素开始标签没有空格
<ul>
<li>
li1</li><li>
li2</li><li>
li3</li><li>
li4</li>
</ul>
空格就消失了:
2. 给父标签设置font-size:0;
该方法可以解决大部分浏览器下inline-block元素之间的间距问题(IE7等浏览器有时候会有1像素的间距)。
ul{
font-size:0;
}
3. 设置负margin
margin负值的大小与上下文的字体和文字大小相关,自行调整。
li{
display: inline-block;
margin-right: -5px;
}
4. 设置float
li{
float:left;
}