用display:inline-block做产品列表

由于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时的情况,为其他字体时会有些不同,下面仅列出了常用的几个

常用字体与letter-spacing的关系
宋体/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: , ,

7 comments

  1. FirHome 说:

    学习了。

  2. 14px 说:

    一个更简单的方法解决缝隙的问题:
    ul { font-size:0;}
    li { font-size:12px;}

  3. 14px 说:

    噢“`介样。
    =。= 浏览器总是自作多情吖…IE搞个1px,safari的最小字体也是1px,不能都像FF那样本份点不。。

  4. JashionXu 说:

    看了你的文章,自己实现了一下。自适应高度,类似表格布局
    有兴趣的可以看看。

    *{ 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

  5. JashionXu 说:

    代码看不到,重贴一下
    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

Leave a comment