Flexbox优雅解决inline-block空隙问题

认真写过前端的同学(不是“Copy and Paste From Stack Overflow”)几乎都遇到过inline-block空隙问题(没碰到也没关系,我下面会重现这个问题)。网上也给出了各种奇技淫巧来解决这个问题,其中以张鑫旭的《去除inline-block元素间间距的N种方法》的解决方案最全,但hack味道过浓,这里我用Flexbox解决这个问题,优雅且简洁

问题重现

属性是display: inline-block水平呈现的元素之间,换行显示或空格分隔的情况下会有间距。这种情况最常见于导航栏,看如下HTML和CSS代码:

<body>
  <ul>
    <li>首页</li>
    <li>新闻</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
</body>
ul {
  list-style: none;
}

ul li {
  display: inline-block;
  background-color: #8192D6;
  color: white;
  padding: 4px 6px;
}

产生的效果如下图所示:

inline-block空隙

这种表现是符合规范的应该有的表现,不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它。

经典解决方案

网上有很多的解决方法,分别从修改HTML、CSS和JavaScript的角度来解决这个问题,所以你就可以看出这个问题有多么的常见以及多么的扰人了吧!这里我们介绍几种HTML和CSS解决该问题的经典方法,JavaScript解决这个问题实在是大材小用了。

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就没有了。有如下几种HTML的解决方法:

  • 将所有的inline-block元素写在一行中,这种做法对于当前这种元素少的情况很适用,但是元素多了全都挤在一行很难阅读和维护。
<ul>
    <li>首页</li><li>新闻</li><li>关于</li><li>联系</li>
</ul>
  • 改变标签的位置,没错这样做代码真的很丑,不忍卒读
<ul>
  <li>
  首页</li><li>
  新闻</li><li>
  关于</li><li>
  联系</li>
</ul>

或者:

<ul>
    <li>首页</li
    ><li>新闻</li
    ><li>关于</li
    ><li>联系</li>
</ul>

或者使用注释:

<ul>
    <li>首页</li><!--
    --><li>新闻</li><!--
    --><li>关于</li><!--
    --><li>联系</li>
</ul>

使用CSS解决也有很多局限性,比如:

  • 通过设置父元素的 font-size: 0可以让间隙消失,但同时你得修改子元素的字体大小,如果子元素很少倒也没啥问题,但是如果子元素很多,你就得一个一个去设置,这个就很麻烦了。
  • 或者你可以设置 marginletter-spacingword-spacing属性为负值,也可以去掉空隙,但这样做跨浏览器兼容性不好。

Flexbox优雅解决

Flexbox只要在ul的样式中加一句话就可以了:

ul {
  display: flex;
}

此时的心情应该如下图:

这是飞一样的感觉

推荐阅读更多精彩内容