去除inline-block元素間的空隙

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-spacing和word-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啦。