CSS實現兩端對齊的幾種方法

方法一：

比較拙劣但省事的作法是手動計算寬度，加一堆「&nbsp」模擬兩端對齊的效果。這種方法咱們就不過多討論了。

方法二：

text-align: justify;
    text-align-last: justify;

這種方法適用於多行文本兩端對齊，text-align控制除最後一行之外的文本兩端對齊，text-align-last控制最後一行文本兩端對齊。

方法三(兼容)：

舊版本的某些瀏覽器，不支持text-align-last屬性，因此解決方案是在文本後面加一個inline-block的僞對象，模擬它爲最後一行，或者在html代碼中，文本最後加一個空的inline-block span。原理相同。

代碼以下：

:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

這樣僞對象就能夠模擬出最後一行的效果了，瀏覽器會把所有文本作兩端對齊處理

 

因此終極方案就是方法二加方法三啦~~親測可用