嵌套的Inner <ul>列表样式的问题</ul>

时间:2014-04-16 05:35:05

标签: css css3

请你看看this demo,让我知道如何修复内部<ul>的左缩进并摆脱儿童红色背景前掉落的灰色区域?

<ul class="sidebar-navigation">
    <li>List 1
        <ul class="sidebar-inner-list">
            <li> <a href="#">Link</a></li>
            <li> <a href="#">Link</a> </li>
        </ul>
    </li>
    <li>List 2
        <ul class="sidebar-inner-list">
            <li> <a href="#">Link 2</a></li>
            <li> <a href="#">Link 2</a></li>
            <li> <a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>

body{color:#fff;}
ul{list-style-type:none;}
li{background-color:#2d2d2d;}
li:hover{ background-color:#ccc;}
.sidebar-inner-list>li{ background-color:red; margin-left:-40px;}

2 个答案:

答案 0 :(得分:1)

ul列表项默认为padding-left,删除此项并且你应该很好。

.sidebar-inner-list{
    padding-left:0;
}

<强> DEMO

答案 1 :(得分:1)

http://jsfiddle.net/sQWE6/4/

ul { padding:0 }

只需从列表中删除自动填充。我想这里真正的问题是你为什么不使用<div>?它们没有自动填充,你似乎不想要一个实际的列表(list-style-type:none)。