首页 > 代码库 > 标签li设为display inline-block后间距问题

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

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

 

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

 

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