很多时候,我们希望列表的最后一行是左对齐排列的,而不是两端对齐,这时候怎么办呢?原理与上面的两端对齐一致。就是复制几个列表元素的外层标签,等宽,但高度为 0,里面就是个(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦!
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
如下 HTML 代码:
<div class="box"> <span class="list"><img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血~~~ </span> <span class="list"> <img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血,不行了,我的小兔乱撞~~ </span> <span class="list"> <img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血,不行了,我的小兔乱撞~~ </span> <!-- web 前端中文站:www.lisa33xiaoq.net --> </div>
CSS 代码:
.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;} .list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
运行效果:
以上就是 text-align:justify 下列表的两端对齐布局的实例,欢迎吐槽!
【注:本文源自网络文章资源,由站长整理发布】