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