text-align: justify;不能均匀分布问题
2018-06-24 01:56:05来源:未知 阅读 ()
本文地址: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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:rem绝对自适应方案
- div元素下的图片不能置顶解决办法 2020-03-26
- FCC---CSS Flexbox: Align Elements Using the justify-cont 2019-12-08
- CSS text-align怎么用 2019-08-29
- CSS中为什么有的元素能够设置高度,而有的元素却不能设置高 2019-08-14
- 自学WEB前端能不能找到一份前端开发工作 2019-04-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash