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

若是不喜歡看分析過程，能夠跳到最後看最終兼容方案

史前方法：

之前實現兩端對齊是這樣的：

<p class="box1">密&emsp;&emsp;碼</p>
<p class="box1">用&emsp;戶&emsp;名</p>
<p class="box1">身&emsp;份&emsp;證&emsp;號</p>

效果是這樣：

而後再慢慢加&emsp 或者&nbsp 來調整。原始、粗暴、效率低。em。。。應該摒棄。。。

現代方式：

自從瞭解到 text-align:justify 發現，原來還有這種操做。

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

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

滿懷期待，結果是：

？？？不是兩端對齊麼，怎麼會無效？？？

原來是這樣的：

（1）  text-align:justify 不處理強制打斷的行，也不處理塊內的最後一行。通俗一點講，就是只有一行顯示的時候這個屬性是不起做用的，或者使用了word-break: break-all;這種強制換行的屬性，也是不起做用的。

（2） 若是內容是多於一行的時候，除了最後一行，都是兩端對齊的效果。

 

問：那麼當只有一行顯示的時候，怎麼讓它能左右兩端對齊呢？ 

方法一：在內容中添加一個用於佔位的標籤，讓內容處於第一行，就能達到效果：

<ul>
    <li>密碼<p class="zw"></p></li>
    <li>用戶名<p class="zw"></p></li>
    <li>身份證號<p class="zw"></p></li>
</ul>

ul li{
    width: 120px;
    text-align: justify;
}
.zw{
    display: inline-block;
    width: 100%;
}

 這時結果爲：

爲何內容效果實現了，可是下面會多出空白來呢？設置zw元素 height:0 都不起做用。。。我估計產生間隙的緣由是 display: inline-block; 致使的。那麼怎麼解決呢？

這時就只有設置 li 的高度，好比給 li 添加 height: 40px;line-height: 40px; 。

結果以下：

這樣就解決了空白的問題。

注意：若是隻設置height，不設置line-height的話，當height設置的值有點小，好比20，仍是看不出來空白，可是設置有點大，好比40的時候，空白又會出現，可是這空白並非佔位符的空白，而是內容沒有垂直居中，剩下的div的空白。

因此設置高度時最好line-height都帶上。

 

方法二：使用：after僞元素（ie7及如下不支持僞類）

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

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

 效果：

 

（1） 和上面的效果同樣，空白部分也能夠經過設置height和line-height來避免。

（2） 這個方法的好處就是少了佔位標籤。

 

方法三：使用 text-align-last:justify 屬性 

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

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

效果：

（1）這個方法使用了 text-align-last:justify 這個屬性，這樣就只需兩個屬性就能達到兩端對齊的效果

（2） text-align-last:justify 這個屬性的兼容性很差。

（3）這樣的結果在谷歌、火狐瀏覽器上能正確顯示，可是在其它瀏覽器中卻沒效果。由於大部分瀏覽器要使得兩端對齊生效，需在文本間插入空白，如空格。

 

因此，纔有了兼容多種瀏覽器的終極兼容方法：

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

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%;
}

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

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

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

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

（5）若是沒有寫height和line-height，出現佔位符after佔據得有位置，或者內容有點錯位，能夠把after加上一個 position:absolute 絕對定位的樣式再試一下。