ul 嵌套列表第一层没有边距？

Question

我想要一个样式列表，该列表在第一级上没有左边距。但在后续的分级子列表上有。有人知道如何做到这一点吗？

<ul>
<li>no margin</li>
<li>
    <ul>
    <li>yes margin</li>
    </ul>
</li>
</ul>

（无需将 css 类添加到 ul 的第一级或更改任何代码）

Answer 1

如果您希望将其应用于应用样式表的每个页面上的所有

，则可以这样做：

ul {/* Remove margin for all <ul>s (and padding, because different browsers have different default styles) */
     margin-left: 0;
     padding-left: 0;
}

ul ul {/* Add a margin for any <ul> inside another <ul> */
    margin-left: 2em;
}

但是如果您只想将其应用于某些列表，则需要添加一些内容HTML 来识别这些列表（正如其他答案所建议的那样）。

Answer 2

第一个 ul 是 body 的直系后代吗？我知道你说过不要在代码中添加 css 类，但我认为向样式表添加内容也不是问题？
如果是这样，您可以使用如下样式声明：

body > ul{
 margin-left:0px;
}

或者如果您知道它确实位于其中的 div：

#your_id > ul{
margin-left:0px;
}

您还可能需要考虑默认填充。

谢谢

Answer 3

您可能应该清除主

的边距，然后为
• < 中的
  设置边距/代码> 元素。

ul {
    margin-left: 0px;
}

li > ul {
    margin-left: 10px;
}

Answer 4

确实如此，但对 TommyBs 的答案有一个小小的补充：您需要应用在 html 列表项标记中使用的 id，如下所示：

<ul>
<li id="your_id">no margin</li>
<li>
    <ul>
    <li>yes margin</li>
    </ul>
</li>
</ul>

在 css 中，相应的行将是

li#your_id {
  margin-left:0px;
}

Answer 5

就我而言，有默认边距，我将它们设置为 0
-webkit-margin-之前：0；
-webkit-margin-after：0；
-webkit-padding-start: 0;