CSS 中 display:inline-block 屬性使用詳解

本文詳細描述了display:inline-block的基礎知識，產生的問題和解決方法以及其常見的應用場景，加深了對inline-block應用的進一步理解。

基礎知識

display:inline-block是什麼呢？相信大家對這個屬性並不陌生，根據名字inline-block我們就可以大概猜出它是結合了inline和block兩者的特性於一身，簡單的說：設定了inline-block屬性的元素既擁有了block元素可以設定width和height的特性，又保持了inline元素不換行的特性。

舉例說明：以前我們做橫向選單列表的時候，我們可以通過li和float:left兩者來實現，現在可以通過li和display:inline-block。

HTML程式碼：

<ul>
    <li>首頁</li>
    <li>關於</li>
    <li>熱點</li>
    <li>聯絡我們</li>
</ul>

CSS程式碼

ul, li { padding: 0; margin: 0; list-style-type: none; }
li { display: inline-block; border: 1px solid #000; }

效果圖

可以看到li元素可以橫向排列，並且可以設定width屬性，大家可以複製程式碼自己檢視效果或檢視Demo

inline-block的問題

觀察上面的例子，細心的同學肯定會發現，每個li之間有一個小空隙，而我們的程式碼中並沒有設定margin等相關屬性，這是為什麼呢？

預設的inline元素

首先，我們觀察一下預設的inline元素的表現：

HTML程式碼

<a>首頁</a>
<a>熱點</a>

CSS程式碼

a { margin: 0; padding: 0; border: 1px solid #000; }

效果圖

預設情況下，inline元素之間就有空隙出現，所以結合了inline和block屬性的inline-block屬性自然也有這個特點。
那這些空隙是什麼呢，它們是空白符！

消除空白符

在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合併成一個。我們編寫程式碼時寫的空格，換行都會產生空白符。所以自然而然的兩個元素之間會有空白符，如果將上述例子中的a標籤寫成一行，空白符消失，選單之間也就緊湊起來了。

空白符雖然是瀏覽器正常的表現行為，但是通常情況下，設計師同學的設計稿不會出現這些空隙，我們在還原設計稿的時候，怎麼去除掉這些空隙呢。

要取出空白符產生的間隙，首先要理解空白符歸根結底是個字元，通過設定font-size屬性可以控制產生的間隙的大小。
首先我們將font-size設定成50px試試，修改CSS程式碼如下：

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

我們修改ul的font-size為50px，而li的font-size為12px保持原來的字型大小，效果如下：

可以看到選單之間的空隙變大了。

接著我們設定font-site屬性為0px，程式碼如下

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

效果如下：

可以看到選單之間的空隙沒有了，大家可以自行檢視Demo

相容性問題

在IE8+，FF和Chrome的瀏覽器，inline-block可以完美的相容，考慮到IE6和IE7等低版本瀏覽器的佔用率，雖然有辦法可以相容，但本文不再贅述，大家有興趣的可以查詢相關資料。

inline-block的應用

inline-block的應用什麼場景有哪些呢？我們大家考慮一個技術的應用場景時，首先一定要思考的是技術的特性和需求是否符合。inline-block的特點是結合inline和block兩種屬性的特定，可以設定width和height，並且元素保持行內排列的特性，基於這一點，所有行內排列並且可以設定大小的場景都是我們可以考慮使用inline-block的應用場景。下面舉例說明：

網頁頭部選單

網頁頭部的選單就是典型的橫向排列並且需要設定大小的應用，在inline-block之前，實現選單基本都是用float屬性來實現，float屬性會造成高度塌陷，需要清除浮動等問題，使用inline-block實現就不需要在意這樣的問題。程式碼如下：

HTML程式碼

<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服裝城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妝館</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">閃購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">團購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍賣</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智慧</a>
        </li>
    </ul>
</div>

CSS程式碼：

a, ul, li { padding: 0; margin: 0; list-style-type: none; }
a { text-decoration: none; color: #333; } 
.header ul { font-size: 0; text-align: center; }
.header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

效果圖

這是模仿京東首頁頭部導航選單的實現，使用inline-block可以很簡單的實現橫向選單列表

內聯塊元素

除了選單之外，一切需要行內排列並且可設定大小的需求就可以用inline-block來實現。

例如使用a標籤做按鈕時，需要設定按鈕的大小，我們就可以使用inline-block來實現。

HTML程式碼

<div>
    點選右邊的按鈕直接購買
    <a href="javascript:;" class="button">
        購買
    </a>
</div>

CSS程式碼

.button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

效果圖

佈局

inline-block也可以用於常見的佈局，使用它就不需要去注意float屬性佈局帶來的問題。

舉例說明，建立一個常見的3列布局。

HTML程式碼

<div class="wrap">
    <div class="header">
        網頁頭部
    </div>
    <div class="content">
        <div class="left">
            左側
        </div>
        <div class="center">
            中間
        </div>
        <div class="right">
            右側
        </div>
    </div>
    <div class="footer">
        網頁底部
    </div>
</div>

CSS程式碼

body, div { margin: 0; padding: 0; }
.header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
.content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
    .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
    .content .left, .content .right { width: 200px; }
    .content .center { width: 600px; background: #00ffff; }

效果圖

這個例子使用了inline-block做出了常見的網頁佈局。

關於inline-block的應用，只要是從左到右，從上到下，並且需要設定大小的列表都可以用它來實現，而這種需求是非常常見的，相比於float，我更推薦inline-block。inline-block的應用應該還有很多，大家可以多多挖掘出來。

總結

相比於使用float所帶來的問題，使用inline-block所需要注意的點主要是空白符帶來的問題，這一點也可以很方便的解決。

使用inline-block可以很方便的進行列表佈局，更加符合我們的思維習慣，相信使用它的同學們也會越來越多，歡迎大家討論。