CSS實現兩端對齊（及原理）

廢話不多說，先放實際代碼。

<div>
    <div class='row'>中文兩端對齊<span></span></div>
	<div class='row'>中文ok<span></span></div>
</div>

.row{
    width: 300px;
    text-align: justify;
}
.row span{width:100%;display: inline-block;}

效果：

說明：上述css樣式都不能缺少。

原理思路

text-align: justify;的作用是兩端對齊，但對中文並不能很好的兼容。如果我們把寬度設定的足夠小，觀察一下效果。

<p>兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊</p>

p{text-align: justify;width: 62px;}

可以看出來，如果行數超過一行那麼兩端對齊可以生效。於是在原本的div中加入一個with:100%的span就可觸發同樣效果。