码迷,mamicode.com
首页 > 其他好文 > 详细

text-align: justify两端对齐布局

时间:2017-12-27 14:13:44      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:blog   back   ali   元素   play   伪元素   content   over   http   

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两端对齐布局

标签:blog   back   ali   元素   play   伪元素   content   over   http   

原文地址:https://www.cnblogs.com/mengff/p/8124889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!