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

html代码

<div class="list">
<ul>
<li><img src="data:images/pic02.jpg" alt=""></li>
<li><img src="data:images/pic02.jpg" alt=""></li>
<li><img src="data:images/pic02.jpg" alt=""></li>
<li><img src="data:images/pic02.jpg" alt=""></li>
<li><img src="data:images/pic02.jpg" alt=""></li>
<li><img src="data: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;

inline-block代替浮动布局float:left列表布局最佳方案的更多相关文章

  1. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  2. 写给后端的前端笔记:浮动(float)布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

  3. 浮动布局float

    浮动 浮动是css里面布局用的最多的属性. .box1{                      float: left;                      width: 300px;    ...

  4. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  5. CSS浮动(Float)

    定义 浮动会使元素向左或向右移动,其周围的元素也会重新排列: 浮动直到它的外边缘碰到包含框或者另一个浮动框才停止: 浮动之后的元素将围绕它,浮动之前的元素不变: 由于浮动框不在文档的普通流中,所以文档 ...

  6. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  7. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  8. 基础又重要的浮动(float)

    浮动 浮动的概念 什么是浮动,他在css中占据什么样的位置 网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? 在css中有三种方式来定位位置 普通文档标准流方式 (默认方式) ...

  9. CSS 布局Float 【4】

    一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框 或者另一个浮动元素的框的边缘.浮动元素不在文档的普通流中,文档的普通 ...

随机推荐

  1. hyper-v新内容

    摘自http://geek.csdn.net/news/detail/30249 继开源.NET,微软推出Hyper-V Container技术及Nano Server Hyper-V Server  ...

  2. 关于Console的Main(String[] args)参数输入

    之前接触一个往Console里输入参数的项目,资深QA教我怎么run,灰常脸红. 今日无事,baidu之. Step1 写简单Console Code. class Program { static ...

  3. StringBuffer工具类整理(一)

    package com.gzcivil.utils; /** * 同StringBuffer * * @author Dragon * @time 2013-3-1 */ public class S ...

  4. Ext布局篇

      EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...

  5. Nodejs随笔(二):像可执行shell脚本一样,运行node 脚本!

    在每次编写nodejs脚本的时候,只需在程序的开头加上如下代码(写过shell脚本的人应该很熟悉): #!/usr/local/bin/node 同时,修改文件权限为可执行: mesogene@mes ...

  6. 《C++ Primer Plus 6th》读书笔记 - 第九章 内存模型和名称空间

    1. 单独编译 1.1 头文件中常包含的内容: 函数原型 使用#define或const定义的符号常量 结构声明 类声明 模板声明 内联声明 1.2 只需将源代码文件加入到项目中,而不用加入头文件.这 ...

  7. 前端中的SEO

    前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...

  8. Flask中endpoint的理解

    在flask框架中,我们经常会遇到endpoint这个东西,最开始也没法理解这个到底是做什么的.最近正好在研究Flask的源码,也就顺带了解了一下这个endpoint 首先,我们看一个例子: @app ...

  9. ASP.NET MVC 中使用 UEditor 富文本编辑器

    在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...

  10. MYSQL 日志文件路径错误 1067错误

    场景再现: ---------------------------------------------------------------------------------------------- ...