你的位置:首页 > 软件开发 > 网页设计 > text

text

发布时间:2017-10-01 20:00:08
对于text-align来说,一般我们都是使用居中这个属性值,突然今天需要达到这样一个效果:对,就是“上海活动”这四个字在所在的区域均匀分布1 <li class="current">2 <h3>上海活动</h3>3 & ...

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

text

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

1 <li class="current">2  <h3>上海活动</h3>3  <p>夜上海新景观探索</p>4  <div class="img"><img src='/images/loading.gif' data-original="images/img4.png" ></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 }

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

text

 

 

居然效果是左居中,那给个: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 }

text

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

 

 

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

审查元素看看吧那就

text

text

 

 

看来果然是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 }

text

完美,结束撒花~

原标题:text

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录