display:inline-block/text-align:justify下列表的兩端對齊佈局

爲了表述上邏輯清晰。咱們先把IE6和IE7瀏覽器晾在一邊，看看IE8+瀏覽器以及現代瀏覽器下如何display:inline-block+text-align:justify實現列表元素的兩端對齊。

說穿了其實很簡單，咱們不妨以最多見的列表標籤-ul, li標籤舉例，要實現li列表的兩端對齊，直接下面這點CSS代碼就OK了：

ul{text-align:justify;}li{display:inline-block;}

簡單得讓人當場吐血三升。

惟一須要注意的就是列表元素首尾標籤留空（或換行）

不可以上一個標籤組的結束標籤與下一個標籤組的其實標籤連在一塊兒

不只如此，對於IE8瀏覽器，列表元素不能處在font-size:0的環境下，至少code<font-size:1px，由於IE8瀏覽器font-size:0或直接把換行空格或普通空格抹掉而沒法實現兩端對齊效果。

ok，下面是重頭戲了，糾纏不清的IE6/IE7瀏覽器。顯然上面的ul, li樣式組合在IE6/7瀏覽器下是行不通的，即便你使用hack讓IE6/7下的li標籤有相似於display:inline-block的特性也是沒有做用的。那麼如何才能讓IE6/7瀏覽器也有列表元素支持text-align:justify屬性呢？通過我反覆試驗與調試，總結了兩點：inline標籤化以及結束標籤連續化。

1. inline標籤化
所謂「inline標籤化」就是列表元素須要使用inline水平的標籤，例如span, a, strong, em等，像li, div這些標籤就不能夠。

2. 結束標籤連續化
所謂「結束標籤連續化」是指列表元素及其內部標籤的結束標籤須要連在一塊兒。例以下面這個就是不行的：

   描述

而應該是這個樣子滴：

   描述

咱們已經習慣告終構化的縮進，因此上面結束標籤連寫看上去很不天然，有些彆扭。可是，爲了實現效果，這是沒有辦法的事情。注意：若是列表標籤內嵌多層，則全部層級的結束標籤都要連續。

IE6/IE7瀏覽器同時知足上面的inline標籤化以及結束標籤連續化，再加上先前現代瀏覽器下的首尾標籤留空，IE6/IE7瀏覽器也就可以實現列表元素的兩端對齊啦！

爲了便於更直觀的知道各個瀏覽器下實現兩端對齊效果須要注意的事項，我特意製做了下表：

各個瀏覽器實現text-align:justify下的兩端對齊佈局注意事項表

瀏覽器	注意事項
IE6	inline水平列表標籤、列表結束標籤連續、列表元素間換行或留空
IE7	inline水平列表標籤、列表結束標籤連續、列表元素間換行或留空
IE8	列表元素間換行或留空、列表元素的環境字體大小不能爲0
現代瀏覽器	列表元素間換行或留空

然而，如今還有一個很悲劇的問題沒有解決，就是當列表元素最後一行沒法兩端對齊的悲劇。

其實這個問題很好解決的。

如何悲劇變喜劇？
列表（或文字）要兩端對齊的前提就是內容必須超過一行，因此，要解決最後一行元素沒法兩端對齊的文字其實很簡單，就是在列表（或文字段）的最後建立一個高度爲0的寬度100%的透明的inline-block的標籤層就能夠了，例如：

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

以下HTML：

例如拿先前最後一行列表悲劇的demo舉例，如今在該demo列表最後添加上面類名爲justify_fix的span元素，結果最後一行兩端對齊排列了

①inline水平標籤

②列表結束標籤連續

③列表標籤換行或留空