去除inline-block元素间的空隙

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

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

先说第一种，好比下面这段代码:

1 2 3 4 5 6

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

假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时咱们能够换个写法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< 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>之间出现书面上的空格。

还有一种写法是去除闭合标签，如：

1 2 3 4 5 6

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

这种写法由于不符合html规范，因此仍是避免使用为好

 

第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0，letter-spacing和word-spacing设为负数，而后再在inline-block元素中把这几个值恢复正常便可。

1 2 3 4 5 6 7 8 9 10 11 12

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啦。