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

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

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

但li又是块状元素，多个block元素会各自新起一行。这个时候我们会给li加上display:inline-block.之后的内联对象会被排列在同一行内。

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。
但是这个时候就会出现下面这种情况。

li之间有空隙，这是因为html之间的空白占位符导致的

解决间隙方法如下

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

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//但是大部分浏览器还不支持