Question

请你看看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;}

Answer 1

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

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

<强> DEMO

Answer 2

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

ul { padding:0 }

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

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

2 个答案: