如何在多列列表的每列中添加粗线?

我想你有四个选择,在每一列下面画一条线,每一个都有利弊。

首先,您可以在无序列表的底部添加一个粗边框,但这没有您需要的间隙。

.directory-result ul {border-bottom: 2px solid #E9DECF;}

其次,可以使用CSS3将边框应用到最后三个列表项的底部,尽管当列的高度不同并且在Internet Explorer(包括IE9)中不起作用时,这在视觉上可能不是您想要的。

.directory-result li:nth-last-child(-n+3) {
     border-bottom: 2px solid #E9DECF;  
}

第三,可以使用Javascript/jQuery添加下划线,方法与上面的CSS3方法相同。优点是它也可以在IE中工作,你可以计算列表项的数量,如果需要的话,只需将其添加到最后一个或两个列表项中,但是你需要支持Javascript。

第四,如果有可能使用后端代码,可以将类添加到最后三个列表项中。然后,您可以具体地设置这些样式,所有浏览器都将支持它。

最后,您可以使用不同的标记,如div或三个无序列表。

在您的 保险商实验室 标签:

ul {
    border-bottom: solid 2px #000;
}

显示:块 或 显示:内联块

我想你最好在这里用潜水器。也许有人会证明我错了。