使用inline-block代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用 inline-block来实现元素的居中效果。但是inline-block会引起元素和元素之间几个像素的间隙(具体间隙大小取决于字体大小)。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。 因为空白字符也是字符,也会引用CSS样式
代码下入
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
结果如图
解决方法1:既然空白间隙是由于换行或空格引起,那么消除换行符不就解决了
但是,这个方法在chrome浏览器下没有效果,在IE6/7下残留1像素间隙。
看HTML结构
<ul>
<li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>
</ul>
解决方法2:设置父元素的font-size为0,在子元素重新设置字体大小
ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 低版本safari 浏览器下还是有问题。
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
font-size: 0;
}
li{
display: inline-block;
width: 100px;
height: 100px;
background: red;
font-size: 16px;
}
解决办法3: 利用负margin-left(不推荐,具体负margin多少取决于字体的大小)
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
display: inline-block;
width: 100px;
height: 100px;
background: red;
margin-left: -5px;
}
解决办法4 letter-spacing(字符边距):负值 or word-spacing(单词边距) 负值
Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。然后,负值大小还是取决于字体。。。。
ul{
list-style: none;
word-spacing: -5px;
}
li{
display: inline-block;
width: 100px;
height: 100px;
background: red;
word-spacing: 0;
}
解决办法5 :去掉闭合标签
emmm….这么做,不符合W3C标准哇….
<ul>
<li>111
<li>222
<li>333
<li>444
<li>555
</ul>
解决办法6 终极必杀:给父元素 设置font-size:0 ;letter-spacing:-3px ,子元素重新设置font-size
ul{
list-style: none;
font-size: 0;
letter-spacing: -3px;
}