Question

我的页面上有一个项目列表，但列表显示在3列以上。我喜欢它，因为它在搜索引擎的意义上是语义的，而且它对HTML有所了解。

但我必须在每列的底部加上粗线。

通过我必须模仿的示例，底部的行是通过将样式添加到每个'list'的底部div来实现的：

.AlphaIndexFundListBottomLineStyle  {
border-left-width:1px;
border-top:2px solid #E9DECF;
overflow:hidden;
text-indent:-3px;
width:180px;
}

我无法做到这一点，因为我使用<ul>元素代替<div>

我是否可以使用现有的HTML / CSS结构在每列的底部获得粗线，还是我必须考虑重构HTML / CSS？

编辑只是要注意，这并不像在订购商品的方式中为HTML添加3 <ul>结构那么简单。如果您注意到，列表按字母顺序排序，但从右到左排序，而不是从上到下排序。这会使将项添加到多个列表变得更加棘手。

Answer 1

我认为你有四种方法可以在每一列下面划一条线，每条线都有利弊。

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

.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或三个无序列表。

Answer 2

在 ul 标记上添加该行：

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

您可以尝试将其设为块并调整多个属性，例如使用 display：block 或 display：inline-block

的div

Answer 3

您可以尝试在您的ul上放置一个y重复的背景图像，该图像与您的lis相同。问题在于，如果文本分为两行，则无法正常工作。

我认为你最好在这里使用div。有人可能会证明我错了。