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

Question

我想要一个有样式的列表，但是在第一层级别上没有margin-left。但是在后续的分级子列表上有。有人知道如何实现吗？

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

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

- user429620

Answer 1

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

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

- Paul D. Waite

Answer 2

第一个ul标签是的直接子元素吗？我知道你说不要在代码中添加css类，但我认为在样式表中添加内容是可以的。如果可以，你可以使用以下样式声明：

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

或者如果您知道这是在 div 中：

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

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

谢谢

- TommyBs

---

谢谢，我之前不知道有 > CSS选择器！ - user429620

@Wesley：请注意，在IE 6中>不起作用。 - Paul D. Waite

Answer 3

您应该清除主要的 <ul> 的外边距，然后为包含在 <li> 元素中的 <ul> 设置外边距。

ul {
    margin-left: 0px;
}

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

- Jorn

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;
}

- paddotk

Answer 5

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

- my9006