Html 将底部边框添加到嵌套列表项

我想用css为每个列表项添加一个底部边框。以下是我的CSS代码：

ul,ol{
    li{
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-top: 3px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;

        ul,ol{
            margin-left: 2em;
                li{
                    border-bottom: 1px solid #eeeeee;
                }
        }
    }
}

它给出如下输出：

截图url:

css代码在顶级项上运行良好。但不在子列表上。请查看屏幕截图并帮助我，提前谢谢。

给你的

ul

讲

demo

.demo li {
   border-bottom: 1px solid #000;  
}

如果你想让你网站上的每一个li都有

border-bottom

，这并不是一个好主意

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

---

如果要缩进嵌套的

li

，可以使用text

问题中的语法错误。（不能在CSS规则中嵌套）

等效的正确语法是

li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

 li ul, 
 li ol{
    margin-left: 2em;
}

---

我不确定我是否很了解您，但有一个简单的代码供您使用：

HTML

<div>
    <ul class="list-1">
        <li class="item-1">Item 1
            <ul class="list-1-1">
                <li>Item 1-1</li>
            </ul>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

演示

---

最好发布您的code@Sowmya很抱歉我不明白你什么意思？我是说完整的代码。HTML也是一个问题。显示在顶级ul底部的子列表项的边框。像screenshot@DON，当

li

具有子项（嵌套的

ul

或

ol

）时，您是否希望不显示其自己的

边框底部

？您是否可以发布希望其显示方式的图像？我希望在每个列表项下显示边框底部。嵌套和顶级列表items@Don我的代码准确地显示了你的图片中的内容。看到你在演示中有同样的问题了吗

ul.list-1 li.item-1, ol.list-1 li.item-1 {
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-top: 3px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;   
}
ul.list-1 li.item-1 ul.list-1-1 , ol.list-1 li.item-1 ul.list-1-1 {
    margin-left: 2em;
}
ul.list-1-1 li {
    border-bottom: 1px solid #eeeeee;
}