html頁面文字左右兩端對齊
阿新 • • 發佈:2019-02-19
我遇到問題是:看不到效果,無論是英文還是中文,在IE和chrome下都不起作用。這是在網上找到的解決方法 :)
css樣式:
div.justify
{
text-align: justify; width:200px; font-size:15px; color:red;
border:1px solid blue; height:18px;
}
div.justify > span
{
display: inline-block /* Opera */;
padding-left: 100%;
}
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元素,並應用樣式。另外,對於中文還必須用空格隔開漢字,否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開,所以沒問題。