由于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)
Tags: bug, css, inline-block
受用了~
学习了。
一个更简单的方法解决缝隙的问题:
ul { font-size:0;}
li { font-size:12px;}
Chrome不支持12px以下的字体
噢“`介样。
=。= 浏览器总是自作多情吖…IE搞个1px,safari的最小字体也是1px,不能都像FF那样本份点不。。
看了你的文章,自己实现了一下。自适应高度,类似表格布局
有兴趣的可以看看。
*{ margin:0; padding:0;}
img{ border:none;}
li{list-style:none;}
a{ color:#000; text-decoration:none;}
a:hover{color:#f00; text-decoration:underline;}
body{ font:12px/1.5 tahoma,arial,宋体,sans-serif;}
.box{ width:750px; margin:auto; background:#ffe;}
.list_video{ letter-spacing:-3.33em; overflow:hidden; zoom:1}
.list_video img{ display:block; margin-bottom:4px; width:140px; height:84px;}
.list_video li{ display:inline-block; letter-spacing:0; *display:inline; vertical-align:top; margin-right:10px; margin-bottom:10px; width:140px; overflow:hidden; zoom:1;}
2010伦敦Gumball 3000拉力赛 豪车盛宴
会员:xxx
播放:1120320
代码看不到,重贴一下
css如下
*{ margin:0; padding:0;}
img{ border:none;}
li{list-style:none;}
a{ color:#000; text-decoration:none;}
a:hover{color:#f00; text-decoration:underline;}
body{ font:12px/1.5 tahoma,arial,宋体,sans-serif;}
.box{ width:750px; margin:auto; background:#ffe;}
.list_video{ letter-spacing:-3.33em;}
.list_video img{ display:block; margin-bottom:4px; width:140px; height:84px;}
.list_video li{ letter-spacing:0; display:inline-block; *display:inline; * zoom:1; vertical-align:top; margin:0 10px 10px 0; width:140px;}
html如下
2010伦敦Gumball 3000拉力赛 豪车盛宴
会员:xxx
播放:1120320