将border-bottom添加到嵌套列表项

时间:2013-04-25 11:08:25

标签: html css html5 css3

我想用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代码在顶级项目上运行正常。但不是在子列表上。请看截图并帮助我,提前致谢。

3 个答案:

答案 0 :(得分:5)

Demo

为您的uldemo

提供课程
.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;
}

<强>样本

http://jsfiddle.net/jVcFb/1/