嵌套列表的第一级没有边距？答案

【问题标题】：ul no margin on first level of nested list?嵌套列表的第一级没有边距？
【发布时间】：2011-09-27 22:44:22
【问题描述】：

我想要一个样式列表，它在第一级没有边距。但在随后的水平子列表中确实如此。有人知道该怎么做吗？

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

（不向ul的第一级添加css类或更改任何代码）

【问题讨论】：

标签： css list margin html-lists

【解决方案1】：

如果您希望将其应用于应用样式表的每个页面上的所有<ul>s，则此方法有效：

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 中添加一些内容以识别这些列表（正如其他答案所建议的那样）。

【讨论】：

【解决方案2】：

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

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

或者如果你知道一个 div，它确实位于：

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

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

谢谢

【讨论】：

谢谢，不知道 > css 选择器！
@Wesley：注意> doesn’t work in IE 6.

【解决方案3】：

您可能应该清除主要<ul> 的边距，然后为<ul> 元素中的<ul> 设置边距。

ul {
    margin-left: 0px;
}

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案5】：

在我的情况下，有默认边距，我将它们设置为 0 -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;

【讨论】：