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="data: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:;
     line-height:;
 }

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

给: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;
 }

完美，结束撒花~