标签li设为display inline-block后间距问题

Posted 2020-09-09 菊次郎的幻想

在对导航栏做水平排列的时候，我们往往对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>

 

这样也是能够消除换行带来的空白边距的哦~~~