HTML CSS如何在嵌套列表中为每个li添加下划线

Question

根据W3C的规范，HTML中嵌套列表的正确写法如下：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

然而，我希望列表中的每个项目底部都有一个边框，以下代码会为它们所有的项目添加下划线，但是不包括 Tea。

li {
    border-bottom: 1px solid purple;
}

有什么建议吗？

- Tristanisginger

---

text-decoration: underline? - GolezTrol

茶可能是有下划线的，但它被绿茶下面的线“覆盖”了。 - Paulie_D

将所有文本包装在span中，并对span进行下划线。fiddle。 - Mr_Green

li ul li { text-decoration:underline; } 更好的方法是使用类选择器来选择所需元素。我认为。 - Harshit Laddha

Answer 1

如果你想让所有东西都有下边框，你需要像这样做：

li {
    border-bottom: 1px solid purple;
}

li > ul {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

示例
备选方案
相同长度的行（但您需要找到一种缩进第二级符号的方法）

否则，只需使用text-decoration

- Pete

Answer 2

也许您可以使用

text-decoration: underline

这适用于元素中的文本。

您的问题在于包含“茶”(tea)的

实际上确实有边框，但它是底部边框，因此在嵌套的

下方。

您可以不使用text-decoration，而是将文本包裹在

元素内的另一个元素(span或div)中，并将边框应用于该元素。如果您想让边框成为整个元素的完整宽度而不仅仅是文本本身，则使用div解决方案特别有用。

- GolezTrol

Answer 3

“茶”菜单的 li 元素确实有边框，只是被最后一个子菜单 li 的边框“遮挡”了。

请参见JSfiddle。

li {
    border-bottom:3px solid red;
}

li ul li {
    border-bottom:3px solid green;
}

- Paulie_D

Answer 4

给它添加一个类名 "add"，并且加上 display: inline-block，如下所示：

  <ul>
    <li>
      <ul>
          <li class="underline">
             Some stuff here
          </li>
      </ul>
   </li>
  </ul>

并且在你的 CSS 中：

.underline {
     display: inline-block;
     border-bottom: 1px #CCCCCC solid;
}

- Jean Paul

Answer 5

正如上面提到的，文本 "Tea" 实际上处于底部，因为默认情况下 li 元素具有 display: list-item 属性。您可以通过使用 display: inline 使其可见，但请注意，您将失去 li 元素的功能，例如 list-style-type，因为它们仅适用于 display: list-item。

li {
    border-bottom: 1px solid purple;
    display: inline;
}
li:after {
    content:"";
    display: block;
}

工作中的Fiddle

- Mr_Green

Answer 6

这个问题是由于“茶”li标签不仅包含“茶”，还包含除了包含“牛奶”的ul和li标签对之外的所有其他ul和li标签对所导致的。 “茶”li正在被下划线标记，实际上出现在“绿茶”下划线下面（如果您仔细观察，应该会注意到双下划线，特别是如果您给li标签添加填充）。 如果您正在以编程方式构建列表，则最好的选择是将li项目包装在另一个标记中：

<ul>
  <li><span>Coffee</div></li>
  <li><span>Tea</span>
    <ul>
    <li><span>Black tea</span></li>
    <li><span>Green tea</span></li>
    </ul>
  </li>
  <li><span>Milk<span></li>
</ul>

然后将你的代码更改为:

li span{
    border-bottom: 1px solid purple;
}

这将确保文本被下划线而不是包含文本的li标签所下划线。

编辑: =====================

这与Green先生在他的评论中推荐的相同。

- Hoytman

Answer 7

有不同的方法可以解决它，我选择了这个。

li {
    border-bottom: 1px solid purple;
}

li > ul > li:first-child {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

- Tristanisginger