CSS基礎篇--如何解決inline-block元素的空白間距

早上在博客中有人提了這樣一個問題：「li元素inline-block橫向排列，出現了未知間隙」，我相信你們在寫頁面的時候都遇到過這樣的狀況吧。

我通常遇到這狀況都會把li浮動起來，這樣就沒有間隙。可是解決這個未知間隙，仍是有不少辦法的，在w3cplus上提供了好幾種解決辦法。在這總結一下。

先看結構：

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

css代碼：

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」的空白：如圖：

第一種就是改變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>

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

結構四：

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

結構四，我想是你們經常使用來解決這樣的問題的方法吧

方法二：負的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下可問題依然存在：

方法四：丟失結束標籤

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

可是這樣的方法是不推薦的。

方法五：jquery方法

html結構：

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

css代碼：

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代碼：

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

其中contents()方法：查找匹配元素內部全部的子節點（包括文本節點）。若是元素是一個iframe，則查找文檔內容。
filter方法：篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

nodeType 屬性返回以數字值返回指定節點的節點類型。
若是節點是元素節點，則 nodeType 屬性將返回 1。
若是節點是屬性節點，則 nodeType 屬性將返回 2。
元素或屬性中的文本內容,則nodeType 屬性將返回 3。

全兼容的樣式解決方法

使用純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;
}

問題地址：http://segmentfault.com/q/101...
原文地址：http://www.w3cplus.com/css/fi...