text-align: justify;不能均匀分布问题

2018-06-24 01:56:05来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 本文地址:http://www.cnblogs.com/veinyin/p/7617610.html 

 

对于text-align来说,一般我们都是使用居中这个属性值,突然今天需要达到这样一个效果:

对,就是“上海活动”这四个字在所在的区域均匀分布

1 <li class="current">
2     <h3>上海活动</h3>
3     <p>夜上海新景观探索</p>
4     <div class="img"><img src="images/img4.png" alt=""></div>
5 </li>

上面是HTML代码

1 li.current h3 {
2     width: 203px;
3     margin: 0 24px;
4     padding: 0 11px;
5     font-size: 20px;
6     line-height: 20px;
7     text-align: justify;
8 }

第一反应当然是这样做,没错,当然有但是!

 

 

居然效果是左居中,那给个:after伪类试试看?

1 li.current h3:after {
2     display: inline-block;
3     content: '';
4     overflow: hidden;
5     width: 100%;
6     height: 0;
7     line-height: 0;
8 }

嗯,这次总算是均匀分布了,很完美,但是! 下面这么大一块空白是什么情况?

 

 

给:after伪类高度和行高都是0啊,不是伪类给撑高的,是哪来的?

审查元素看看吧那就

 

 

看来果然是h3的问题,那就给它个固定高值:

1 .section5 li.current h3 {
2     width: 203px;
3     margin: 0 24px;
4     padding: 0 11px;
5     font-size: 20px;
6     line-height: 20px;
7     text-align: justify;
8     height: 20px;
9 }

完美,结束撒花~

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:将childNodes返回的数据转化维数组的方法

下一篇:rem绝对自适应方案