html - 设置应出现在同一级别的嵌套 uls 填充样式的好方法

Question

我有这种结构

<ul>
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

尽管从逻辑上讲，一切都是这样组织的，但我需要在一个平面列表中显示所有内容。

我可以通过从 ul,li 中删除边距和填充来做到这一点，但这确实使得它没有 li 可以有填充。

我想将所有列表项填充 5px，但这样做实际上会将嵌套的 li 在左侧和顶部缩进 10px。 基本上我需要它看起来像这样。什么是设置不会推过嵌套列表的填充的好方法。

我可以自由修改基本的 html 结构，但我想保留嵌套，因为它使我正在做的许多其他事情变得更容易（例如可扩展/可隐藏的子项）

Answer 1

这个CSS：

li {
    padding-left: 5px;
    padding-top: 5px;
}

li li {
    padding-left: 0px;
}

应该处理任意深度的嵌套列表。我做了一个jsfiddle作为例子。（该示例使用 15px 的填充以使其更明显。）

Answer 2

您可以做的是仅选择 topmost <ul>，然后<li>使用 CSS > 选择器仅为其子（但不是孙）元素提供间距。

例如，使用 id 指定最顶层的元素：

HTML：

<ul id="Head">
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

CSS：

#Head > li
{
    padding-left: 5px;
}

这是 jsFiddle 上的示例。