由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做?》,评论发不成功,又恰逢最近频繁遇到类似的项目,总结如下:
传统的实现方式是用float来实现,换一种思路用display:inline-block,比如这篇《Cross-Browser Inline-Block》(中文翻译)。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题,不过现在已经有了解决方法(详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进):
ul{letter-spacing:-.25em}
li{letter-spacing:normal;}
同时我也尝试了《Layout of repeating blocks》提到的word-spacing,不过仅Firefox/IE8有效,而在Chrome/Safari中无效
另外要注意的是**-.25em**是字体设置为Arial时的情况,为其他字体时会有些不同,下面仅列出了常用的几个
宋体/Verdana | -.5em |
---|---|
Arial | -.25em |
Tahoma | -.333em |
于是display:inline-block
加上vertical-align
就OK鸟
ul{letter-spacing:-.25em}
li{display:inline-block;#display:inline;#zoom:1;letter-spacing:normal;vertical-align:top;}
如果li中只有img,vertical-align:middle
可以实现未知高度图片列表垂直居中,比如Picasa图片列表的效果(单个图片垂直居中请看怿飞的《图片垂直居中的使用技巧》,不过个人认为这个通常只会出现在面试题中:P)
——- 2013-4-26 更新 ——-
因最新版的 Chrome 已经支持 font-size:0
,故可以用 font-size:0
来去除间距