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

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

 

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

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

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

上面是HTML代码

li.current h3 {
    width: 203px;
    margin: 0 24px;
    padding: 0 11px;
    font-size: 20px;
    line-height: 20px;
    text-align: justify;
}

第一反应当然是这样做，没错，当然有但是！

 

 

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

li.current h3:after {
    display: inline-block;
    content: '';
    overflow: hidden;
    width: 100%;
    height: 0;
    line-height: 0;
}

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

 

 

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

审查元素看看吧那就

 

 

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

.section5 li.current h3 {
    width: 203px;
    margin: 0 24px;
    padding: 0 11px;
    font-size: 20px;
    line-height: 20px;
    text-align: justify;
    height: 20px;
}

完美，结束撒花~