text-align: justify兩端對齊佈局

看風景就發表於2017-12-27

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

 

相關文章