text-jusyify下的inline-block自适应列表布局实例

很多时候,我们希望列表的最后一行是左对齐排列的,而不是两端对齐,这时候怎么办呢?原理与上面的两端对齐一致。就是复制几个列表元素的外层标签,等宽,但高度为0,里面就是个(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦!

更多精彩内容请看 web前端中文站
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-jusyify下的inline-block自适应列表布局实例

以上就是text-align:justify下列表的两端对齐布局的实例,欢迎吐槽!

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到