by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1194css
本文其實真實題目應該是「CSS float浮動的深刻研究、詳解及拓展(三)」，可是爲了更顯著的體現本文的核心內容，順便搞點噱頭吸引眼球，同時跟百哥和谷妹玩點小曖昧，就改爲了如今這個樣子了。html
1、一抹前言
沒有愛的日子，時間如指尖細沙，不知不覺就流逝了。寫「CSS float浮動的深刻研究、詳解及拓展(一)」和「CSS float浮動的深刻研究、詳解及拓展(二)」彷佛就在不久前，然而相隔差很少有一年之久了。文章最後留下了「浮動佈局更好的替代方案是什麼？」後文再介紹的預告。chrome
因爲本身肚子中的貨物不足以撐起一篇足夠質量的文章，因此關於「浮動佈局更好的替代方案是什麼？」的文章一直並未動筆。好在事物老是在發展的，我也是天天都是在進步，對於列表佈局的思考也愈發成熟。加上正好前不久又有人詢問我「浮動佈局的替換方案是什麼」，因而以爲介紹「浮動佈局的替換方案「的時機成熟了。瀏覽器
要注意，本文的佈局專指列表佈局。就是具備相同DOM結構的水平排列能夠repeat出來的列表元素。如QQ校友中的圖片列表（圖片截自老同窗相冊，已隱去名字）：
wordpress
2、列表浮動佈局的侷限
列表浮動佈局就是指經過使用float屬性，讓列表元素依次排列的佈局（一般是左浮動，float:left）。這是至關常見的也是目前最最主流的列表佈局方式，因此這裏就不吃鹹魚蘸醬油——畫蛇添足show代碼了。工具
對於浮動局部的侷限性，想必同行們都知道，就是每一個列表元素的高度必需要一致，不然就會像是俄羅斯方塊同樣，「鋸齒相錯」，例如一個左浮動列表佈局，若是第一行有個列表高度高於其餘列表，那就在第二行，第一個元素會沿着最高元素的右側對齊，此緣由是屬於惡魔系的float屬性破壞了inline box（具體參見前兩篇float的文章）。佈局
那發展勢頭的新浪微博舉例，其右側人氣用戶的模塊，姓名是限高的，如今用firebug去掉這個限高屬性，看看結果會如何：
學習
能夠看到，列表元素就像是俄羅斯方塊卡錯了位置同樣，錯開了。因此，若是咱們要使用浮動佈局列表，就必須限高，因而，不得已，須要裁掉超多的用戶名信息。測試
浮動自己就是個魔鬼，因此，使用浮動佈局還須要修復其帶來的反作用——高度塌陷的問題，也就是常提到的「清除浮動」了。字體
另外，IE6下，重複的列表元素會出現莫名的bug，例如出現不知哪來的文字。
因爲浮動佈局學習與理解的門檻低，又受主流之風驅動，且知足了絕大多數的佈局需求。因此，在追尋更好的佈局方式上，你們的願望彷佛不是很強烈，固然，多是本身井底之蛙了，不過從國內領先網站的列表佈局狀況來看，貌似浮動佈局仍是紮根很深的（這回在列表佈局上，人人網讓我刮目了一把）。
3、提一提表格佈局
在表格佈局時代，咱們基本上不用擔憂列表元素高度不一會錯位的問題，表格中的單元格(td標籤)自動回等高關聯，且水平列表項還包裹在tr等標籤中，因此，不可能發生錯位。因此，很正常的，咱們會想到利用相似table屬性的樣式進行一些佈局，例如display:table; display:table-row; display:table-cell;等屬性，對此我是建議您看看支付寶UED的「基於display:table的CSS佈局」一文，若是不是受制於IE6/7對這些display屬性不支持，基於display:table的CSS佈局定會大放異彩的。
若是想使用display:table的CSS佈局來代替浮動佈局，權衡來看，不見得有提升。好的地方在於，不要擔憂列表元素的高度不一，甚至自動等高。撇開兼容性不談，其還有不足在於在後臺循環輸出時須要水平repeat下，而後再垂直repeat。既然這樣，還不如使用浮動佈局，由於在這種狀況下，使用浮動也是能夠不用擔憂高度不一的問題的，這就是facebook好友列表的作法（oh, 該死，facebook上不去，想截個圖的）。因此，基本上，使用display:table的CSS佈局來代替浮動佈局是徹底佔據下風的。於是，這裏就不瞎子點燈白費蠟了，如一絲寒意的秋風，輕輕帶過。
4、另一種display屬性，display:inline-block
display:inline-block感受與display:table-cell有些類似，例如對內部元素的包裹性。可是，因爲display:inline-block最大的不一樣就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用很是自由，可與文字，圖片混排，可內嵌block屬性元素，能夠能夠置身於inline水平的元素中。可謂黑白通吃，左右逢源。
inline-block屬性的元素適用於inline box模型，因此，當其中的列表元素高度不一時，是不會有錯位的。關於line box模型，我在以前的「css行高line-height的一些深刻理解及應用」第二部分提到了，以及前面「CSS float浮動的深刻研究、詳解及拓展(一)」一文的「浮動的破壞性」部分中作過比較詳細的介紹。一言以蔽之，就是每一行全部的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+以及現代瀏覽器，直接使用：
{display:inline-block;}
就能夠了，支持任意水平的元素。
對於不支持的IE6/7瀏覽器該怎麼辦呢？若是是inline水平的元素（如a標籤，span標籤之類）跟上面同樣，直接：
{display:inline-block;}
就能夠了，對於這兩個瀏覽器，其功效與*zoom:1;是同樣的。
若是是block水平的元素，例如li標籤。則須要多點代碼，目前我知道的方法有兩個，以下所示：
li {display:inline-block;...}
li {display:inline;}
或者是：
li{display:inline; zoom:1;...}
block水平的inline-block化的元素與inline水平的在表現層又是有差別的，這個後面會談到。
5、一點小阻撓：inline-block元素間的換行符空格間隙問題
在完整的展現兼容性的像素級的inline-block元素列表佈局前，有必要講講使用display:inline-block列表佈局常常會遇到的「換行符/空格間隙問題」。
若是inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。若是沒有空格與間隙纔是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像個圖片同樣。例如，兩個不在一行的img標籤，造成的兩個圖片之間就會有間隙，以下圖所示：
您能夠狠狠地點擊這裏：換行符與inline-block元素間間隙demo
要讓這些空格不出現，最簡單的最容易理解的就是讓列表的結束標籤與下一個列表的開始標籤連在一塊兒，就像是：
<li>
<span>...</span>
</li><li>
<span>...</span>
</li>
可是，這種作法好傻啊，並且HTML代碼的可讀性很很差。尤爲考慮到現實狀況：後臺人員可能不清楚標籤換行對樣式的影響，直接後臺repeat的時候，換行了。因此，此方法頂多臨時應付些小打小鬧的地方，要想普遍使用，顯然業餘了。
其實，咱們只要細細想一想，空格符本質上就是個字符，與a,b,c,d這些字符是個同一個屬性的東西，只是他是空格，透明的看不見而已（但能夠選中）。因此，只要咱們使用讓文字寬度爲0的那些方法，不就能夠解決inline-block元素間換行符間隙的問題啦！
因而，很天然而然的，想到了如下樣式：
{font-size:0;}
我還記得我大學時候解決IE6下標籤高度沒法小於11像素bug時的方法，就是使用的font-size:0;這屬性可讓莫名的空格啊神馬東東的都變成浮雲。咱們來試下，能否用來消除inline-block元素間的換行間隙的問題。
以下測試代碼：
<div style="font-size:0;">
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>
如今來看看幾個主流瀏覽器下的反應，首先是Firefox瀏覽器：
而後是IE7瀏覽器：
哦呵呵，來看看大神Chrome瀏覽器：
但願越大失望越大，Chrome下的空格對於font-size:0貌似很不屑一顧。唉，這個問題在Chrome仍是嬰兒階段的時候就有了，到如今尚未改過來。
通過我稀里嘩啦一輪番的瀏覽器測試，發現就只有Chrome瀏覽器對font-size:0置若罔聞，連一樣內核的Safari都不會這樣。
您能夠狠狠地點擊這裏：font-size:0清除換行符間隙demo
雖然Chrome目前國內份額有限，可是畢竟有很多高端用戶在用啊。因此，一旦Chrome不支持font-size:0，那麼，此方法顯然不能應用到實際項目中，在加上IE和Safari下仍是有1像素的間隙，因此此方法就此刷掉。如今得去考慮其餘更好的方法。
咱們一塊兒開動腦筋，還有什麼CSS屬性能夠影響文字的水平間距的。啊，只見腦殼上燈泡一亮，有了，不是有個letter-spacing屬性嘛。能夠控制文字間的水平距離的，支持負值，可讓文字水平方向上重疊（line-height是讓文字垂直方向上重疊）。喲呵呵，心動不如行動，還拿那兩張美女圖片作示例，看看letter-spacing屬性能否抹掉換行符產生的間距。參見以下測試代碼：
<div style="letter-spaceing:-4px;">
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>
先來看看一貫表現優異的Firefox3.6瀏覽器，以下圖：
很不錯吧，再來看看前面讓咱們失望的Chrome瀏覽器：
嘿嘿，也是不錯，但願就在眼前，看看IE新生主力軍IE8下的表現：
再來看看對inline-block屬性不支持的IE7瀏覽器：
您能夠狠狠地點擊這裏：letter-spacing去除間隙空格
結果讓人內心咯噔了一下，暈那，好像沒有做用誒！不會啊，我很清楚的記得即便IE6/7瀏覽器也是支持letter-spacing去空格的。後來我仔細對比，發現這裏的letter-spacing:-4px是有所用的，只是默認的空格間隙比較大，因此，即便捨去4像素間距，仍是有一段空白內容。可是，我清楚的記得在Arial字體下，空格間距應該是兼容的，爲什麼這裏就IE6/IE7瀏覽器下不同呢？後來，我反覆測試，終於發現了一個第一次看到的bug，「冒號影響了空格間隙的水平大小」。現將「效果：」這個小標題後面的中文冒號還成英文的，結果，空格間距一會兒兼容了，真是很神奇，我不得不佩服IE6/7瀏覽器的怪異指數。
您能夠狠狠地點擊這裏：IE6/7下冒號英文化後間隙demo
IE6/7瀏覽器自己就是個怪胎，喜歡不走尋常路。在這兩個瀏覽器下，block水平的元素inline-block化以後，會直接忽略換行符的間隙。因此，這裏還有一點點疑慮沒有解決。既然IE6/7瀏覽器div,li 這些標籤inline-block化後沒有空格間隙，那麼使用letter-spacing負值會不會讓列表元素水平重疊呢？啊，這個問題就不要擔憂了，若是元素間自己沒有空格，使用letter-spacing屬性是不會發生水平重疊的問題的。例以下面的測試代碼：
<div style="letter-spacing:-4px;">
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" /><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" />
</div>
結果以下圖：
也就是說，若是元素間自己就沒有間隔，不管letter-spacing的值多小，元素都不會重疊。可是，若是有空格間隙存在，letter-spacing會發生重疊的。因此，咱們無需爲IE6/7元素會不會重疊這個問題擔憂了。
您能夠狠狠地點擊這裏：letter-spacing與無間隙重疊demo
6、順着letter-spacing屬性走更遠些
按照我本身淺薄的經驗開看，換行符產生的空格與按一下space鍵的做用是同樣的。此空格所撐開的水平距離受空格字符所在環境的字體以及字體影響。因爲不一樣的網站使用的字體不同，因此，在藉助letter-spacing屬性實現列表佈局時的letter-spacing的取值可能就不同，因此，我專門研究了下空格水平間距與字體/字體大小之間的關係，以及兼容性等，整理在下面的表格中了，但願能對您有所幫助，要是發現不許確之處歡迎指正：
letter-spacing與字體大小/字體關係的數據表
| Firefox 3.6.12 | Chrome 7.0 | Safari 4.0(win) | Opera 10.51 | IE8 | IE6/7 | 是否兼容 | |
|---|---|---|---|---|---|---|---|
| 16px/Arial | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 14px/Arial | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 13px/Arial | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 12px/Arial | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 16px/Tahoma | -5px | -5px | -5px | -4px留空1px/-5px彈開還原 | -5px | -5px | 不兼容(僅Opera) |
| 14px/Tahoma | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 13px/Tahoma | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 12px/Tahoma | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 16px/Verdana | -6px | -6px | -6px | -5px留空1px/-6px彈開還原 | -6px | -6px | 不兼容(僅Opera) |
| 14px/Verdana | -5px | -5px | -5px | -4px留空1px/-5px彈開還原 | -5px | -5px | 不兼容(僅Opera) |
| 13px/Verdana | -5px | -5px | -5px | -4px留空1px/-5px彈開還原 | -5px | -5px | 不兼容(僅Opera) |
| 12px/Verdana | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 16px/Geneva | -8px | -8px | -8px | -7px留空1px/-8px空隙還原 | -8px | -8px | 不兼容(僅Opera) |
| 14px/Geneva | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 13px/Geneva | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 12px/Geneva | -6px | -6px | -6px | -5px留空1px/-6px空隙還原 | -6px | -6px | 不兼容(僅Opera) |
| 16px/Georgia | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 14px/Georgia | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 13px/Georgia | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 12px/Georgia | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 16px/Times New Roman | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 14px/Times New Roman | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 13px/Times New Roman | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 12px/Times New Roman | -3px | -3px | -3px | -2px留空1px/-3px空隙還原 | -3px | -3px | 不兼容(僅Opera) |
| 16px/Courier New | -10px | -10px | -10px | -9px留空1px/-10px空隙還原 | -10px | -10px | 不兼容(僅Opera) |
| 14px/Courier New | -8px | -8px | -8px | -7px留空1px/-8px空隙還原 | -8px | -8px | 不兼容(僅Opera) |
| 13px/Courier New | -8px | -8px | -8px | -7px留空1px/-8px空隙還原 | -8px | -8px | 不兼容(僅Opera) |
| 12px/Courier New | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 16px/monospace | -8px | -8px | -8px | -7px留空1px/-8px空隙還原 | -8px | -8px | 不兼容(僅Opera) |
| 14px/monospace | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 13px/monospace | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 12px/monospace | -6px | -6px | -6px | -5px留空1px/-6px空隙還原 | -6px | -6px | 不兼容(僅Opera) |
| 16px/宋體 | -8px | -8px | -8px | -7px留空1px/-8px空隙還原 | -8px | -8px | 不兼容(僅Opera) |
| 14px/宋體 | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 13px/宋體 | -7px | -7px | -7px | -6px留空1px/-7px空隙還原 | -7px | -7px | 不兼容(僅Opera) |
| 12px/宋體 | -6px | -6px | -6px | -5px留空1px/-6px空隙還原 | -6px | -6px | 不兼容(僅Opera) |
| 16px/微軟雅黑 | -5px | -5px | -5px | -4px留空1px/-5px空隙還原 | -5px | -5px | 不兼容(僅Opera) |
| 14px/微軟雅黑 | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 13px/微軟雅黑 | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
| 12px/微軟雅黑 | -4px | -4px | -4px | -3px留空1px/-4px空隙還原 | -4px | -4px | 不兼容(僅Opera) |
create by zhangxinxu 2010-11-03
您能夠狠狠地點擊這裏：letter-spacing/空格間隙/字體/字體大小關係測試demo
能夠看到，基本上全部的瀏覽器對於不一樣字體下的空格符的水平佔據的解析都是一致，惟一有瑕疵的是在Opera瀏覽器下，兩個inline-block元素間空白間隙使用letter-spacing去除的極限是1像素，當看上去要正好爲0的時候，letter-spacing彷佛失效，空白間距恢復成letter-spacing:0時的效果。
ok，如今咱們把上面嘮嘮叨叨的些東西提煉整理一下，有以下一些結論：
» block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其餘瀏覽器均有；
» inline水平的元素inline-block後，全部主流瀏覽器都有換行符/空格間隙問題；
» font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，Chrome瀏覽器無效，其餘瀏覽器都完美去除；
» letter-spacing負值能夠去除全部瀏覽器的換行符間隙，可是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原。
爲何袁隆平的水稻牛逼啊，就是由於是雜交的。這也是不宜近親結婚之道，雜交能夠產生彪悍的下一代。這個原理一樣適用於CSS，雖然font-size:0有缺陷，letter-spacing負值也有不足，可是一旦將它們強制交配，哦呵呵，互補與整合，換行符間隙問題迎刃而解。以下測試代碼（環境字體大小84%，字體Arial）：
<div style="letter-spacing:-3px; font-size:0;">
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" />
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" />
</div>
結果不支持font-size:0去間隙的Chrome瀏覽器：
letter-spacing沒法實現徹底去間隙的Opera瀏覽器：
您能夠狠狠地點擊這裏：font-size:0，letter-spacing負值雜交demo
若是您使用的是IE6/7瀏覽器，可能會看到圖片重疊了2像素，這是1像素文字間隙-3像素letter-spacing值的結果。可是，實際狀況下，列表元素都是從block元素inline-block化的，元素間自己就沒有間隙的，因此，就不會有重疊的問題了。
因此，應用display:inline-block屬性實現列表佈局的幾個關鍵字就是：block水平的標籤，font-size:0和letter-spacing負值。
下面就將經過實例展示基於display:inline-block的列表佈局。
7、基於display:inline-block的列表佈局
本部分主要是實例展現，我比較喜歡順手找素材作實例，而新浪微博又是我經常掛着的，因此，沒有惡意的，又拿新浪微博作示例了。
目前新浪微博右側的人氣用戶推薦列表是採用浮動佈局的，如今，採用inline-block佈局實現一樣的，可是高度可不宜的佈局：
您能夠狠狠地點擊這裏：inline-block佈局和浮動佈局對比實例頁面
下爲效果截圖：
頁面的上面列表採用的是目前新浪微博的原CSS代碼，而下面的列表就是使用的inline-block列表佈局。相比前面的浮動佈局，沒必要擔憂每一個列表高度不一的問題，因此用戶的姓名能夠完整顯示，這可比直接裁掉要好些。
demo頁面中默認加載會有兩條參考線，是因爲應用了我本身寫的jQuery標尺參考線插件，您有興趣能夠狠狠地點擊這裏：網頁製做輔助工具-jQuery標尺參考線插件
此插件會產生透明遮罩層，因此，你用firebug看代碼的時候不能準確找到目標元素，此時只要按下」ESC」快捷鍵就能夠隱藏標尺與參考線了。若是要想顯示標尺，按下快捷鍵」R」便可，具體使用仍是參見上面給出的文章連接。
顯示兩條參考線是用來講明，使用inline-block列表佈局是沒有兼容性問題的，能夠達到與float佈局同樣的像素級無差別佈局。
此例子中，文字大小爲12像素，字體環境爲Arial字體，對照上面的letter-spacing間隙數據表可知，這裏的letter-spacing值應該是-3像素，因而……
其實人人網上就已經應用了基於display:inline-block的列表佈局，您能夠去看人人網的分享頁面，其熱門分享視頻列表就是採用的基於display:inline-block的列表佈局，可是其佈局僅僅採用了letter-spacing負值，這也就意味着在Opera瀏覽器下，此列表是有兼容性問題的，以下面在Opera 10上的截圖：
其餘瀏覽器列表間距是12像素，而Opera下倒是15像素，這是Opera瀏覽器letter-spacing負值反彈結果。可是，考慮到國情：Opera用戶寥寥無幾，因此，此不兼容性問題的影響也甚小。因此，您若是也不把Opera瀏覽器放在考慮範圍內，使用inline-block列表佈局時只要一個輔助CSS letter-spacing就能夠了，若是顧慮到Opera，則不要忘了font-size:0;
8、更進一步：更加靈活的inline-block列表佈局
若是你覺得基於display:inline-block的列表佈局的優勢僅僅在於可讓列表元素不等高，那你就大錯特錯了。
在IE6/7下，inline水平標籤inline-block化後與純正的inline-block元素的做用就像是一個模子裏出來的，這種「兼容性」能夠很好地發揮inline-block列表佈局的潛力。例如，使用white-space:nowrap;屬性可讓列表不換行，你是否想到了列表元素的水平滾動切換？
使用text-align:justify能夠實現自動等寬水平排列的列表佈局，並且是兩端對齊的，不須要計算寬度，一切都是瀏覽器自動的，很方便很強大。尤爲在自適應佈局中，大顯身手，大放光彩。就以此舉個簡單的例子吧，以下CSS代碼：
.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
以下HTML代碼：
<div class="box">
<span class="list"><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，個人小兔亂撞~~</span>
.
.
.
</div>
效果參見下面的視頻（錄製的是改變瀏覽器寬度時的效果）：
從視頻中能夠看出，當瀏覽器寬度改變時，只要列表元素滿行，inline-block化的列表都是等寬且兩端對齊排列的，您能夠狠狠地點擊這裏：列表自動兩端對齊排列demo
IE6/7下inline水平的元素模仿inline-block屬性就算再像仍是模仿，MJ仍是MJ，小月月依舊是小月月，因此IE6/7下，像是text-justify兩端對齊仍是比較脆弱的，像是一不留神的標籤，或是換行符都會致使失效，遠不如純正的inline-block屬性來得威武
與堅挺。
9、啊，終於，結語
固定佈局仍是流體佈局，自己網頁重構的思想決定了該使用哪一種列表佈局方式。像我，就是個流體佈局控，因此，我會直接揮揮手，跟浮動列表佈局說拜拜的，翻譯成日語就是：賽有拉拉！
本文僅是展現，若是您對浮動列表佈局有些戀戀不捨的情懷，我會當大街上看到情侶打kiss同樣，由於親的又不是我女友（雖然沒有），因此關我鳥事，你隨意。好了，寫了已經夠多了，一些調侃的話就不說了。最後，畢竟資質有限，文中不免有表述不當的地方，歡迎指正，感謝閱讀，就這些。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1194
（本篇完）