如何解決inline-block元素的空白間距

標籤：

有關於使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進行布局，或者使用inline-block來實現元素的置中效果。前面《CSS3製作的分頁導航》一文中就是使用的inline-block製作的置中效果，不過留下了一上問題，就是使用inline-block的元素之間會存在“4px”的空白間距。那麼今天我們就一起來說說這個“4px”的問題。

大家首先來看一個DEMO：

 

HTML Markup

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

 

CSS Code

*{  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;}

 

上面的demo效果，明顯的可以看出，在inline-block的元素之間存在“4px”的空白：

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

方法一：改變HTML結構

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

結構一：

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

 

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

結構二：

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

 

結構二和結構一幾乎是一樣，結束標籤的“>”成了另一行的起始標籤。

結構三：

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

 

結構三的方法採用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。

結構四：

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

 

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

方法一所說的是通過標籤來解決，雖然問題是解決了，但可以說不能稱作是技巧。而且上面的方法只適合於寫靜態頁面的時候，一旦你的HTML不是自己寫，而是後台產生，就比如CMS來說，標籤後台產生，此時，我想大家又要罵街了，這可怎麼辦？其實我們除了上面的方法，還可以使用CSS來解決的。

方法二：負的margin

很多地方討論使用負的margin來解決，比如說：

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

 

這種解決方案並不完美，如果你的父元素設定的字型大小不一樣，可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設定一個負的margin值才能實現同等的效果。

當然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字型大小有極大的關係。所以我個人建議不使用負的margin來解決這樣的問題。

方法三：設定父元素字型為0

第三種方法設定父元素的字型為“0”，然後在“inline-block”元素上重設字型需要的大小。

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”元素丟失關閉標籤

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

 

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

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

方法五：jquery方法

最後在給大家提供一種jquery的方法：

HTML Markup

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

 

CSS Code

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 Code

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

 

最後一種方法是通過jQuery來改變“nodeType”的值，從而實現我們需要的效果。

上面講述了多種方法，但要相容多個瀏覽器版本，並不每種方法實用，以前常用的方法，這次測試並不相容所有瀏覽器。要做到相容所有瀏覽器，個人認為還是在html的標籤上做一定的處理，或者採用最後一種方法，通過“jQuery”來改變“nodeType”值達到效果。針對這個“inline-block”之間的間距有幾篇文章做過介紹，但裡面的方法，和上面介紹的測試的基本一樣，具體如何運用，大家還是根據自己的需求進行選擇或處理。

擴充閱讀：

1.  Fighting the Space Between Inline Block Elements
2.  display: inline-block et les espaces indésirables
3.  去除inline-block元素間間距的N種方法

那麼有關於“inline-block”的間距如何去除，今天就扯到這了，希望這篇文章對喜歡用inline-block的童鞋有所協助。如果您有更好的方法，記得與我們一起分享，歡迎在下面的評論中留下您的經驗，或者指正上面的不對之處。

更新：全相容的樣式解決方案

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

.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;}

 

轉自：W3CPLUS

如何解決inline-block元素的空白間距