text-align: justify兩端對齊布局
阿新 • • 發佈:2017-12-27
flow nes class 代碼 text post 最後一行 tex 類型
text-align: justify可以實現文字的兩端對齊布局,註意點如下:
1. 兩端對齊後,若文字間距太大,可以使用letter-spacing收縮字符間距
2. text-align:justify默認不處理最後一行(只有一行的自然也不會處理)的布局,若要處理,可以用偽元素新增一個末行
示例代碼:
.justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;} .item{width:100px;height:100px;background-color:#0086b3;display:inline-block;list-style:none; } .justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content:‘‘;}
3. 參與布局的標簽必須是inline或inline-block類型,且標簽之間換行或者有空格才能實現效果
出處:http://www.cnblogs.com/Travel/p/4552701.html
text-align: justify兩端對齊布局