css中inline-block元素的空白间距

作者：袖梨 2022-06-25

解决办法

第三种方法设置父元素的字体为“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代码

item1

item2

item3

item4

item5

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”的值，从而实现我们需要的效果。