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;
}

有什么建议吗？

Answer 1

如果你的意思是所有东西的边框底部，你需要做这样的事情:

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

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

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

Example
Alternative
Same length lines (但你必须找到一种缩进二级元素符号的方法)

否则只需使用text-dexoration