inline-block代替浮动布局float:left列表布局最佳方案

时间:2020-6-27 作者:admin

基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案。

html代码

<div class="list">
    <ul>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></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以下的兼容 提到了。

,, 推荐文章

  • 前端开发规范文档

    我的愿景 成为业内知名的web前端开发工程师 文档介绍 这份文档已经写了差不多一年了,最近也更新过了,作为一个有组织和纪律的团队,规范是必须的,毕竟每个coder都有自己的一套风格和规范,为了以后团队的和谐发展,结合前端业界的开发经验,故而 …

  • Emmet:编写HTML+CSS必备的插件

    Sublime Text2 插件Emmet中文文档使用帮助手册,Emmet的快捷键使用,Emmet的介绍说明等。

  • 前端基础一:Doctype? 行内元素和块级元素

    问题1:Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 X …

  • CSS水平居中的四种方法

    CSS水平垂直居中,特别是使用在列表的时候经常会用到的,本文分享了四种做法,有相对定位法、强制内联法、display:inline-block和display:table-cell方法。

  • 固定表格布局

    在CSS trick上看到这篇关于表格布局的文章,还没了解过这个属性,读下来感觉挺有用的,会英文的朋友欢迎阅读原文:fixed table layout table{ table-layout:fixed;} 默认的table-layout …

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。