在对导航栏做水平排列的时候，我们往往对li元素设为display:inline-block
目的是为了，让所有li元素并排在一起，但是遇到个问题，我们的标签之间会产生空白边距
如图所示：
这样看上去，原本可以紧凑排列的，多出了这么些空白边距，我们有时候处理的方法是：
对于每个li元素设置为float:left，这样做虽然能够消除空白边距，但是其父元素ul的高度就无法自适应，举个例子，每个元素li的高度为30px，但是这样做了之后，ul的高度仍为0，就算清除了浮动，
所以，最好的办法，就是给每个元素li，显示为inline-block，即行内元素，但是这个边距如何去除呢？
方法如下：
我们只需要在父元素ul上面设置，font-size:0px ，这样空白边距就消失了，
看一下效果图：
这样就很好看了，还有一种方法，就是在每一对li元素之间不要有换行，即在我们大代码里面，把换行放在li元素内部，如下：
<ul>
` <li>a
</li><li>b
</li><li>b
</li><li>b
</li>
</ul>
这样也是能够消除换行带来的空白边距的哦~~~