首页 > 代码库 > inline-block代替浮动布局float:left列表布局最佳方案
inline-block代替浮动布局float:left列表布局最佳方案
基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案。
html代码
<div class="list"> <ul> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> <li><img src="http://www.mamicode.com/images/pic02.jpg" ></li> </ul></div>
css代码(来自taobaoued)
.list {font-size:0;/* 所有浏览器 */*word-spacing:-1px;/* IE6、7 */}.list ul li{font-size: 12px;letter-spacing: normal;word-spacing: normal;vertical-align:top;display: inline-block;*display:inline;*zoom:1;}@media screen and (-webkit-min-device-pixel-ratio:0){/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */.list{letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/}}
最终效果图完美兼容
查看演示
使用inline-block替换float:left的列表法不是一个hack,而是一个进步。
使用inline-block的时候,要注意在IE7和IE6下用背景替换文字的时候,会出现一个bug,解决方法是用font-size:0; line-height:0;替换text-indent:-9999px;,bug在这篇:inline-block和text-indent在ie7以下的兼容 提到了。
inline-block代替浮动布局float:left列表布局最佳方案
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。