可用的CSS文字左右對齊

標籤：

最近在工作項目中接觸到Web介面設計的問題，要實現文字左右對齊的效果。在網上搜尋了一下，用的都是類似的技巧：

text-align:justify;
text-justify:inter-ideograph;

　　我遇到問題是：看不到效果，無論是英文還是中文，在IE和chrome下都不起作用。還好在StackOverflow上找到瞭解決方法 ：）

樣式：

 1 div.justify  2 {  3 　　text-align: justify; width:200px; font-size:15px; color:red;  4 　　border:1px solid blue; height:18px; 5 } 6 div.justify > span  7 {  8 　　display: inline-block /* Opera */;  9 　　padding-left: 100%; 10 }

 

HTML：

 

<div class="justify">hello, text justify.</div><br/><div class="justify"> hello, text justify.<span></span></div><br/><div class="justify">中 文 兩 端 對 齊</div><br/><div class="justify">中 文 兩 端 對 齊<span></span></div>

 

 

 

：

 

從可以看到，除了要在區塊層級元素加text-align:justify樣式外，還需要在裡面加一個空的span元素，並應用樣式。另外，對於中文還必須用空格隔開漢字，否則也沒有左右對齊的效果。英文每個單詞都有空格隔開，所以沒問題。

可用的CSS文字左右對齊