如何進行CSS的display:inline-block屬性的使用

如何進行CSS的display:inline-block屬性的使用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

display:inline-block感覺與display:table-cell有些相似，例如對內部元素的包裹性。但是，由于display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內嵌block屬性元素，可以可以置身于inline水平的元素中。可謂黑白通吃，左右逢源。
inline-block屬性的元素適用于inline box模型，所以，當其中的列表元素高度不一時，是不會有錯位的。每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由里面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素發生錯位。如下面的我自己畫得拙劣的示意圖所示的：

根據一些前輩的說法，IE6/7不支持display:inline-block屬性，只是可以讓標簽有類似于inline-block的屬性，起初我也是接受這種說法的，不過后來又表示了懷疑，最近使用text-align:justify;做測試的時候的一些樣式表現證實了：確實IE6/7是不支持display:inline-block屬性，只是讓其表現的跟inline-block一樣，尤其對于inline水平的元素，其表現度可以用perfect一詞來形容了。
對于IE8+以及現代瀏覽器，直接使用：

CSS Code復制內容到剪貼板

1. {display:inline-block;}  

就可以了，支持任意水平的元素。
對于不支持的IE6/7瀏覽器該怎么辦呢？如果是inline水平的元素（如a標簽，span標簽之類）跟上面一樣，直接：
{display:inline-block;}
就可以了，對于這兩個瀏覽器，其功效與*zoom:1;是一樣的。
如果是block水平的元素，例如li標簽。則需要多點代碼，目前我知道的方法有兩個，如下所示：

CSS Code復制內容到剪貼板

1. li {display:inline-block;...}   

2. li {display:inline;}  

或者是：

CSS Code復制內容到剪貼板

1. li{display:inline; zoom:1;...}  

block水平的inline-block化的元素與inline水平的在表現層又是有差異的。

inline-block的問題

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

默認的inline元素

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

HTML代碼

XML/HTML Code復制內容到剪貼板

1. <a>首頁</a>  

2. <a>熱點</a>  

CSS代碼

CSS Code復制內容到剪貼板

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

效果圖

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

消除空白符

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

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

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

CSS Code復制內容到剪貼板

1. ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}   

2. 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，代碼如下

CSS Code復制內容到剪貼板

1. ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}   

2. li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }  

效果如下：

兼容性問題

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

XML/HTML Code復制內容到剪貼板

1. <div class="header">  

2.     <ul>  

3.         <li>  

4.             <a href="javascript:;" target="_blank">服裝城</a>  

5.         </li>  

6.         <li>  

7.             <a href="javascript:;" target="_blank">美妝館</a>  

8.         </li>  

9.         <li>  

10.             <a href="javascript:;" target="_blank">超市</a>  

11.         </li>  

12.         <li>  

13.             <a href="javascript:;" target="_blank">全球購</a>  

14.         </li>  

15.         <li>  

16.             <a href="javascript:;" target="_blank">閃購</a>  

17.         </li>  

18.         <li>  

19.             <a href="javascript:;" target="_blank">團購</a>  

20.         </li>  

21.         <li>  

22.             <a href="javascript:;" target="_blank">拍賣</a>  

23.         </li>  

24.         <li>  

25.             <a href="javascript:;" target="_blank">金融</a>  

26.         </li>  

27.         <li>  

28.             <a href="javascript:;" target="_blank">智能</a>  

29.         </li>  

30.     </ul>  

31. </div>  

CSS代碼：

CSS Code復制內容到剪貼板

1. a, ul, li { padding: 0; margin: 0; list-style-type: none; }   

2. a { text-decoration: none; color: #333; }    

3. .header ul { font-size: 0; text-align: center; }   

4. .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }  

效果圖

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

內聯塊元素

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

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

HTML代碼

XML/HTML Code復制內容到剪貼板

1. <div>  

2.     點擊右邊的按鈕直接購買   

3.     <a href="javascript:;" class="button">  

4.         購買   

5.     </a>  

6. </div>  

CSS代碼

CSS Code復制內容到剪貼板

1. .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代碼

XML/HTML Code復制內容到剪貼板

1. <div class="wrap">  

2.     <div class="header">  

3.         網頁頭部   

4.     </div>  

5.     <div class="content">  

6.         <div class="left">  

7.             左側   

8.         </div>  

9.         <div class="center">  

10.             中間   

11.         </div>  

12.         <div class="right">  

13.             右側   

14.         </div>  

15.     </div>  

16.     <div class="footer">  

17.         網頁底部   

18.     </div>  

19. </div>  

CSS代碼

CSS Code復制內容到剪貼板

1. body, div { margin: 0; padding: 0; }   

2. .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }   

3. .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }   

4.     .content .left, .content .center, .content .rightright { display: inline-block; font-size: 16px; height: 400px; }   

5.     .content .left, .content .rightright { width: 200px; }   

6.     .content .center { width: 600px; background: #00ffff; }  

效果圖

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

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

總結

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

關于如何進行CSS的display:inline-block屬性的使用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。