列表的边界崩溃?

时间:2011-11-14 19:46:25

标签: css border html-lists

是否存在边框折叠:列表的折叠替代方案,其中li显示为边框为1px实体的块。

1 个答案:

答案 0 :(得分:3)

您可以通过添加以下内容删除除第一个列表项以外的所有内容的上边框:

li:not(:first-child) {
    border-top: 0;
}

http://jsfiddle.net/mblase75/3h8bm/

IE8和IE7不支持:not。但是,它们确实支持:first-child,因此解决方法很简单:

li {
    border: 1px solid blue;
    border-top: 0;
}
li:first-child {
    border-top: 1px solid blue;
}

http://jsfiddle.net/mblase75/3h8bm/4/

IE6不支持其中任何一种,因此如果您担心该浏览器,则必须直接向第一个元素添加自定义类(例如.first-child)。