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