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

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為任丘企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，任丘網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. {display:inline-block;}  

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

CSS Code復(fù)制內(nèi)容到剪貼板

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

2. li {display:inline;}  

或者是：

CSS Code復(fù)制內(nèi)容到剪貼板

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

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

inline-block的問題

觀察上面的例子，細(xì)心的同學(xué)肯定會(huì)發(fā)現(xiàn)，每個(gè)li之間有一個(gè)小空隙，而我們的代碼中并沒有設(shè)置margin等相關(guān)屬性，這是為什么呢？

默認(rèn)的inline元素

首先，我們觀察一下默認(rèn)的inline元素的表現(xiàn)：

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. 首頁  

2. 熱點(diǎn)  

CSS代碼

CSS Code復(fù)制內(nèi)容到剪貼板

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

效果圖

默認(rèn)情況下，inline元素之間就有空隙出現(xiàn)，所以結(jié)合了inline和block屬性的inline-block屬性自然也有這個(gè)特點(diǎn)。
那這些空隙是什么呢，它們是空白符！

消除空白符

在瀏覽器中，空白符是不會(huì)被瀏覽器忽略的，多個(gè)連續(xù)的空白符瀏覽器會(huì)自動(dòng)將其合并成一個(gè)。我們編寫代碼時(shí)寫的空格，換行都會(huì)產(chǎn)生空白符。所以自然而然的兩個(gè)元素之間會(huì)有空白符，如果將上述例子中的a標(biāo)簽寫成一行，空白符消失，菜單之間也就緊湊起來了。

空白符雖然是瀏覽器正常的表現(xiàn)行為，但是通常情況下，設(shè)計(jì)師同學(xué)的設(shè)計(jì)稿不會(huì)出現(xiàn)這些空隙，我們?cè)谶€原設(shè)計(jì)稿的時(shí)候，怎么去除掉這些空隙呢。

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

CSS Code復(fù)制內(nèi)容到剪貼板

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保持原來的字體大小，效果如下：

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

接著我們?cè)O(shè)置font-site屬性為0px，代碼如下

CSS Code復(fù)制內(nèi)容到剪貼板

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+，F(xiàn)F和Chrome的瀏覽器，inline-block可以完美的兼容，考慮到IE6和IE7等低版本瀏覽器的占用率，雖然有辦法可以兼容，但本文不再贅述，大家有興趣的可以查找相關(guān)資料。

inline-block的應(yīng)用

inline-block的應(yīng)用什么場景有哪些呢？我們大家考慮一個(gè)技術(shù)的應(yīng)用場景時(shí)，首先一定要思考的是技術(shù)的特性和需求是否符合。inline-block的特點(diǎn)是結(jié)合inline和block兩種屬性的特定，可以設(shè)置width和height，并且元素保持行內(nèi)排列的特性，基于這一點(diǎn)，所有行內(nèi)排列并且可以設(shè)置大小的場景都是我們可以考慮使用inline-block的應(yīng)用場景。下面舉例說明：

網(wǎng)頁頭部菜單

網(wǎng)頁頭部的菜單就是典型的橫向排列并且需要設(shè)置大小的應(yīng)用，在inline-block之前，實(shí)現(xiàn)菜單基本都是用float屬性來實(shí)現(xiàn)，float屬性會(huì)造成高度塌陷，需要清除浮動(dòng)等問題，使用inline-block實(shí)現(xiàn)就不需要在意這樣的問題。代碼如下：

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1.   

2.     

     

   •         

   •   

   •             服裝城  

   •         

     

   •         

   •   

   •             美妝館  

   •         

     

   •         

   •   

   •             超市  

   •         

     

   •         

   •   

   •             全球購  

   •         

     

   •         

   •   

   •             閃購  

   •         

     

   •         

   •   

   •             團(tuán)購  

   •         

     

   •         

   •   

   •             拍賣  

   •         

     

   •         

   •   

   •             金融  

   •         

     

   •         

   •   

   •             智能  

   •         

     

   •