html - 在项目符号下方放置一个底部边框

Question

我希望我的最后一个列表有一个一直到左边距的下划线，而不仅仅是内容开始的地方。我尝试使用“列表样式位置：内部；” 标签，但它所做的只是将项目符号点向右移动，而不是将下划线向左移动。有人帮忙吗？

<li class="end">content</li> 

.end{
border-bottom:1px solid black;
margin-bottom:-1px;}

score 2 · Accepted Answer

如果你想强调你的项目符号，这将做到：

ul li {
  list-style:none;
  border-bottom: #000 solid 1px;
}

ul li:before {
  content: '\2022';
  padding-right: 20px;
}

这是一个带有代码的jsfiddle

编辑如果您要在列表下划线，这将做到：

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

这是一个带有代码的jsfiddle

score 0 · Accepted Answer

你可以<ul>像这样给出边界：Demo here。

ul {
border-bottom:5px solid black;
}

另外的选择..

与仅仅给最后一个列表项一个底部边框相反，您可以简单地<hr>在列表中放置一个进程。这样做，您可以避免有关边距的原始问题。

这个例子，在这里。这是更好的选择。。

2 回答 2