inline-block在css中并不是什么新东西,但是有朋友可能会发现使用inline-block了,它与元素之间会存在4px的空白间距了,下面我来总结一些解决办法。
解决办法
第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大校
代码如下
复制代码
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}
上面的办法在ff,gg浏览器还是不错了,但是在其它浏览器还是不行,最后我介绍一种jquery解决办法
jquery方法
最后在给大家提供一种jquery的方法:
代码如下
复制代码
HTML代码
<ul class="removeTextNodes">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS代码
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
jQuery 代码
代码如下
复制代码
$('.removeTextNodes').contents().filter(function() {
return this.nodeType === 3;
}).remove();
最后一种方法是通过jQuery来改变“nodeType”的值,从而实现我们需要的效果。