我想用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;
}
}
}
}
它提供如下输出:
屏幕截图网址:http://oi34.tinypic.com/ih1eea.jpg
css代码在顶级项目上运行正常。但不是在子列表上。请看截图并帮助我,提前致谢。
答案 0 :(得分:5)
为您的ul
说demo
.demo li {
border-bottom: 1px solid #000;
}
如果你想让你网站上的每一个li都得到border-bottom
,那么这不是一个好主意而不是
ul li {
border-bottom: 1px solid #000;
}
如果要缩进嵌套li
,可以使用文本
答案 1 :(得分:1)
您在问题中发布的语法是错误的。 (你不能在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;
}
答案 2 :(得分:-2)
我不确定我是否理解你,但是你有简单的代码:
<强> 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>
<强> CSS 强>
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;
}
<强>样本强>