CSS中使用text-align:justify讓內容兩端對齊併兼容IE及主流瀏覽器的方法

咱們作登陸頁面時有時須要用戶名和密碼倆端對齊，這樣顯得美觀一點，下面介紹一下幾種實現方法：

1、使用 text-align屬性（只兼容谷歌、火狐瀏覽器）：

html

<ul>
    <li>密碼</li>
    <li>用戶名</li>
    <li>身份證號</li>
</ul>

css

ul li{
    width: 120px;
    text-align: justify;
    text-align-last:justify
}

效果

2、兼容大多數瀏覽器的終極兼容方法（ie7及如下不支持僞類）

html

<ul>
    <li>密碼</li>
    <li>用戶名</li>
    <li>身份證號</li>
</ul>

css

ul li{
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: justify;
    text-align-last:justify
}
ul li:after{
    content: '';
    display: inline-block;
    width: 100%;
}

加僞類after的做用是text-align:justify 不處理強制打斷的行，也不處理塊內的最後一行。通俗一點講，就是隻有一行顯示的時候這個屬性是不起做用的，或者使用了word-break: break-all;這種強制換行的屬性，也是不起做用的。若是內容是多於一行的時候，除了最後一行，都是兩端對齊的效果。

（1）注意每一個單詞之間都有空格，這個很重要，很重要，很重要，並且只需一個空格就行，多個空格也不影響。若是沒有這個空格，兼容性不好，基本只有谷歌和火狐支持。

（2）這個方法兼容ie7及以上，還有其它的瀏覽器。ie6沒測，因此不敢下結論。

（3）多行內容也可使用一樣的方法，只是最後一行若是不去加空格，仍是不會處理，只是默認的往左對齊。

（4）li 這個標籤要設置 list-style: none; 去掉默認屬性，不然當只有一行的時候，會出現並無左右兩端對齊，而是相似右對齊的bug。。。

如果還不兼容各大瀏覽器請加屬性：text-justify:distribute;