CSS文字兩端對齊
編輯：CSS特效代碼
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.justify {
border: 1px solid blue;
width: 200px;
height: 18px;
font-size: 15px;
color: red;
text-align: justify;
}
.justify span {
display: inline-block;
padding-left: 100%;
}
</style>
</head>
<body>
<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>
</body>
</html>
result：
總結：從效果圖可以看到，除了要在塊級元素加text-align:justify樣式外，還需要在裡面加一個空的span元素，並應用樣式。另外，對於中文還必須用空格隔開漢字，否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開，所以沒問題。
- 上一頁:前端開發：css基礎知識之盒模型以及浮動布局。
- 下一頁:CSS畫邊框和背景
小編推薦
熱門推薦