解决li标签使用inline-block出现的间隙问题

我们在写网页的时候，头部的导航条一般会用：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

但li又是块状元素，多个block元素会各自新起一行。这个时候我们会给li加上display:inline-block.之后的内联对象会被排列在同一行内。但是这个时候就会出现每个li之间有空隙。这是因为html之间的空白占位符导致的，解决方法如下:

1，很容易想到的就是让所有的li都占一行。消除空白占位符。但是这样，页面显得很混乱。

    <ul>
        <li></li><li></li><li></li>
   </ul>

2，父元素ul的fontsize设为0,重新为li设置fontsize

3，让li不闭合 
4，在下一行换行li

    <ul>
        <li>...
        </li>
        <li>...
        </li>
    </ul>
5，给li设置负边距 
如：margin-left:-4px;

6，设置css样式：white-sapce-collapsing//但是大部分浏览器还不支持