最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

去除inline-block元素间的空隙

CSS rockyxia 4368浏览

写在前面

inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。

几种尝试

总体来时可分为两种方法,一种是改变html结构法,另一种是css法。

先说第一种,比如下面这段代码:

<ol>
   <li>首页</li>
   <li>关于我们</li>
   <li>联系我们</li>
   <li>加入我们</li>
</ol>

假设 li 是 inline-block元素,则 li 间会出现讨厌的空隙,这时我们可以换个写法:

<ol>
   <li>首页</li
   ><li>关于我们</li
   ><li>联系我们</li
   ><li>加入我们</li>
</ol>

<ol>
   <li>
   首页</li><li>
   关于我们</li><li>
   联系我们</li><li>
   加入我们</li>
</ol>

<ol>
   <li>首页</li><!--
   --><li>关于我们</li><!--
   --><li>联系我们</li><!--
   --><li>加入我们</li>
</ol>

以上三种写法都是可以的,总之就是避免让 </li>与<li>之间出现书面上的空格。

还有一种写法是去除闭合标签,如:

<ol>
   <li>首页
   <li>关于我们
   <li>联系我们
   <li>加入我们
</ol>

这种写法因为不符合html规范,所以还是避免使用为好

第二种是css解决方法。

思路是把inline-block元素的父元素的font-size设为0,letter-spacingword-spacing设为负数,然后再在inline-block元素中把这几个值恢复正常即可。

ul{
  font-size:0;
  letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/
  word-spacing:-4px;   /*实际情况下 -4这个值可能还要调整*/
}
ul li{
  display:inline-bolck;
  zoom:1;
  font-size:12px;
  letter-spacing:normal;
  word-spacing:normal;
}

后话了

貌似我还看到过一种js方法,思路大概是通过移除inline-block元素之间的文本节点来实现的,但能用css解决的东西就别动用js啦。

转载请注明:Rockyxia Web技术博客 » 去除inline-block元素间的空隙
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)