神刀安全网

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

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; }

产生的效果如下图所示:

Flexbox优雅解决inline-block空隙问题
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; }

此时的心情应该如下图:

Flexbox优雅解决inline-block空隙问题
这是飞一样的感觉

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Flexbox优雅解决inline-block空隙问题

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址