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

解决办法

第三种方法设置父元素的字体为“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”的值,从而实现我们需要的效果。

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

相关文章:

你感兴趣的文章:

标签云: