如何定位嵌套列表项？

Question

我是网页设计新手。任何帮助，将不胜感激。

我通过做一个实时项目来学习html和css，并且陷入了嵌套列表项的定位。

我的网络浏览器渲染看起来像这样。

我的HTML：

<nav class="nav-sidebar">
<ul class="sidebar-ul">
    <li class="sidebar-parent">parent-item-1
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
    <li class="sidebar-parent">parent-item-2
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
    <li class="sidebar-parent">parent-item-3
        <ul class="sidebar-sublist">
            <li class="sidebar-children">child 1</li>
            <li class="sidebar-children">child 2</li>
        </ul>
    </li>
</ul>
</nav>

我的CSS：

用于导航栏

.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}

为父李

.sidebar-parent{
display: block;
width: auto;
padding-right: 5px;
padding-left: 20px;
border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}

为孩子们提供

.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
padding-right: 5px;
padding-left: 20px;
width: auto;
display: block;}

如何定位儿童以对齐侧栏的最左侧？至少在父li之下？

非常感谢您的帮助，并为我可怕的英语和代码感到抱歉。谢谢你的帮助。

Answer 1

将浏览器应用的默认样式重置为ul标记。

.sidebar-sublist{
    padding: 0px;
    margin: 0px;
}

同时从.sidebar-parent删除左侧填充。

Answer 2

在您的标记中，您可以将以下内容添加到CSS中，它应该执行我认为您要求的内容：

.sidebar-sublist { padding-left: 0; }

如果您希望嵌套项与父项完全齐平，那么您可以修改代码的这一部分：

.sidebar-children{
  padding-left: 20px; /* remove this if you want these flush with parent */
}

Here's a fiddle showing the first change（你也可以编辑左边的填充）：

Answer 3

您必须从类.sidebar-parent和.sidebar-children中删除填充并提供边距：0到ul元素。 这是修改后的CSS代码。

.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
display: block;}

.sidebar-parent{
display: block;
width: auto;

border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}

.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}

.sidebar-ul, .sidebar-sublist{margin:0; padding:0;}

请检查演示链接。

http://jsbin.com/puqaloya/1/edit