inline-block元素的空白間距解決方法<轉>

使用inline-block來代替float進行佈局，或者使用inline-block來實現元素的居中效果。有關於使用inline-block來代替float的討論也蠻多的。

不過就是使用inline-block的元素之間會存在「4px」的空白間距。那麼今天咱們就一塊兒來講說這個「4px」的問題。

先看下代碼

HTML部分：

1 2 3 4 5 6 7

< ul >    < li >item1</ li >    < li >item2</ li >    < li >item3</ li >    < li >item4</ li >    < li >item5</ li > </ ul >

 

CSS代碼：

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

*{    margin :  0 ;    padding :  0 ; } ul {    list-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ; } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ; }

 

明顯的能夠看出，在inline-block的元素之間存在「4px」的空白：

上面截圖是：IE8-九、Firefox、Safari等瀏覽器下的效果，換句話說，這種現像只有在這幾種瀏覽器中才會出現。下面咱們就來講說解決這個「4px」(Chrome下是8px)的幾種方法：

方法一：改變HTML結構

簡單一點的方法就是就是改變HTML的結構，你可使用下面幾種方法的任何一種均可以達到效果：

結構一:

1 2 3 4 5 6 7 8

< ul >    < li >    item1</ li >< li >    item2</ li >< li >    item3</ li >< li >    item4</ li >< li >    item5</ li >  </ ul >

 

這種方法接近標籤換行格式的寫法，也更趨近閱讀。

結構二:

1 2 3 4 5 6 7

< ul >    < li >item1</ li    >< li >item2</ li    >< li >item3</ li    >< li >item4</ li    >< li >item5</ li >  </ ul >

 

結構二和結構一幾乎是同樣，結束標籤的「>」成了另外一行的起始標籤。

結構三:

1 2 3 4 5 6 7

< ul >    < li >item1</ li > <!--    --> < li >item2</ li > <!--    --> < li >item3</ li > <!--    --> < li >item4</ li > <!--    --> < li >item5</ li >  </ ul >

 

結構三的方法採用的是html的註釋的方法，這種方法我想你們不太常見，不過一樣能解決咱們須要解決的問題。

結構四：

1	< ul >< li >item1</ li >< li >item2</ li >< li >item3</ li >< li >item4</ li >< li >item5</ li ></ ul >

 

結構四，我想是你們經常使用來解決這樣的問題的方法吧，下面咱們來看看按上述幾種方法寫的效果：

方法一所說的是經過標籤來解決，雖然問題是解決了，但能夠說不能稱做是技巧。並且上面的方法只適合於寫靜態頁面的時候，一旦你的HTML不是本身寫，而是後臺生成，就好比CMS來講，標籤後臺生成，此時，我想你們又要罵街了，這可怎麼辦？其實咱們除了上面的方法，還可使用CSS來解決的。

方法二：負的margin

不少地方討論使用負的margin來解決，好比說：

1 2	ul{ font-size : 12px ;} ul li{ margin-right : -4px ;* margin-right : 0 ;}

 

這種解決方法並不完美，若是你的父元素設置的字號不同，可能你的「-4px」就不能解決問題。何況在Chrome中你須要另外設置一個負的margin值才能實現同等的效果。

固然有些文章介紹使用」-0.25em」來解決，這也是跟元素的字號有極大的關係。

因此我我的建議不使用負的margin來解決這樣的問題。

方法三：設置父元素字體爲0

第三種方法設置父元素的字體爲「0」，而後在「inline-block」元素上重置字體須要的大小。

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

ul {    list-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ;    font-size :  0px ;      } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ;    font-size :  12px ; }

 

這樣處理在Firexfox,chrome等瀏覽器下是達到了效果，但是在Safari下可問題依然存在：

按此來講，方法三也不是絕佳的好方法，用不用你們本身考慮。

方法四：丟失結束標籤

說實在的，這種方法又回到了方法一，在html標籤上動手腳。就是讓「inline-block」元素丟失關閉標籤

1 2 3 4 5 6 7

<ul>    <li>item 1    <li>item 2    <li>item 3    <li>item 4    <li>item 5 </ul>

 

樣式基本不變，咱們來看看效果：

這種方法雖然能達到各瀏覽器的兼容，但仍是有一個前提，那就是「DOCTYPE」要選擇對，在「XHTML」下可就問題又出來了。

方法五：jquery方法

最後在給你們提供一種jquery的方法：

HTML代碼

1 2 3 4 5 6 7

< ul  class = "removeTextNodes" >    < li >item1</ li >    < li >item2</ li >    < li >item3</ li >    < li >item4</ li >    < li >item5</ li > </ ul >

 

CSS代碼

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

ul {    list-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ;    font-size :  12px ; } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ; }

 

jQuery 代碼

1 2 3

$( '.removeTextNodes' ).contents().filter( function () {      return  this .nodeType === 3;      }).remove();

 

最後一種方法是經過jQuery來改變「nodeType」的值，從而實現咱們須要的效果。

上面講述了多種方法，但要兼容多個瀏覽器版本，並不每種方法實用，之前經常使用的方法，此次測試並不兼容全部瀏覽器。要作到兼容全部瀏覽器，我的認爲仍是在html的標籤上作必定的處理，或者採用最後一種方法，經過「jQuery」來改變「nodeType」值達到效果。

那麼有關於「inline-block」的間距如何去除，今天就扯到這了，但願這篇文章對喜歡用inline-block的童鞋有所幫助。若是您有更好的方法，記得與咱們一塊兒分享，歡迎在下面的評論中留下您的經驗，或者指正上面的不對之處。

更新：全兼容的樣式解決方法

通過高人指點，使用純CSS仍是找到了兼容的方法，就是在父元素中設置font-size:0,用來兼容chrome，而使用letter-space:-N px來兼容safari:

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

.finally-solve {    letter-spacing :  -4px ; /*根據不一樣字體字號或許須要作必定的調整*/    word-spacing :  -4px ;    font-size :  0 ; } .finally-solve li {    font-size :  16px ;    letter-spacing :  normal ;    word-spacing :  normal ;    display :inline- block ;    * display :  inline ;    zoom: 1 ; }

轉自  http://blog.csdn.net/clh604/article/details/8295856