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

概述基于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 { 基于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;}

有什么建议？

解决方法 也许你可以使用

text-decoration: underline

这适用于元素中的文本.

你的问题是含锂的茶实际上确实有一个边框,但它是一个底部边框,所以它低于嵌套的li.

您也可以将文本包装在li元素内的另一个元素(span或div)中,而不是使用文本修饰,并将边框应用于该元素.如果您希望边框是元素的整个宽度而不是单独的文本,那么使用div的这种解决方案特别有用.

总结

以上是内存溢出为你收集整理的HTML CSS如何在嵌套列表中为每个li加下划线全部内容，希望文章能够帮你解决HTML CSS如何在嵌套列表中为每个li加下划线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。