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

作者: 康斌 | 来源:发表于2016-09-30 20:52 被阅读451次

认真写过前端的同学（不是“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可以让间隙消失，但同时你得修改子元素的字体大小，如果子元素很少倒也没啥问题，但是如果子元素很多，你就得一个一个去设置，这个就很麻烦了。
或者你可以设置 margin或letter-spacing或word-spacing属性为负值，也可以去掉空隙，但这样做跨浏览器兼容性不好。