当li设置为inline-block之后消除元素之间的间距

今天在仿酷狗音乐官网的时候，在写一个导航栏的时候，遇到了这样的一个问题（为直观一点，这里我们将它的背景颜色设置为红色）：

如下，将两个ul中的li设置为inline-block之后，理想中的状态应该是像这样，两个li元素之间并没有任何的间隔，连在一起的，

然而实际上的状态是，

为什么呢？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度，所以两个li之间的空格间隙就是这么出来了。

解决办法：

第一种：

既然造成这个原因的理由是<li>换行造成的，最为直接简单的办法就是不让<li>换行，即像这样

然后你就会发现，没有换行的<li>之间是没有间隙的，而换行的<li>依旧存在间隙

但是这样子过后，大量的<li>标签写在一行，代码不够美观，看起来很冗长

第二种：

使用margin-right负值，使得右边的<li>元素左移覆盖掉前者的间隙。但是不同浏览器之间两者的间隙是不同的，所以这个办法并不通用

效果图如下：

两个元素之间没有空隙了

第三种：

为inline-block元素添加样式float:left,利用浮动覆盖间隙

第四种：

在父元素中设置font-size: 0，然后在子元素上重置正确的font-size。inline-block元素必须设定字体，不然行内元素中的字体不不显示