从 HTML 列表元素中删除默认样式

Question

所以我有一些代码看起来像：

<ul>
  <li>
    <ul>
      <li> ... </li>
    </ul>
  </li>
</ul>

这已经缩进了。我没有样式来缩进这一点。根据计算的样式，没有 margin-left，但所有内容实际上都是缩进的，我想这是嵌套 ul 元素的默认行为？

comment-children无论如何，在每个嵌套的 ul 上，我都有一个名为I need to say only 5 down can indent （这样就完成了，太棒了）的类，.comment-children .comment-children .comment-children .comment-children .comment-children但在 640px 的宽度下，所有嵌套都必须关闭。

我遇到问题的部分是ul元素默认是嵌套的http://jsfiddle.net/d7az0jv3/

你想让我做什么

• 删除所有默认嵌套，让我通过类自己嵌套它comment-children
• 在 640 像素处删除所有嵌套。

Answer 1

您的示例不足以演示您想要执行的涉及 class 的操作comment-children，但一般来说，要删除跨浏览器列表上的缩进，您应该实现规则

ul, li { margin-left: 0; padding-left: 0; }

这是更新的 jsfiddle

如果您只想将元素嵌套到特定级别，我的建议是将一个类应用于ul设置缩进的基类，然后添加一个规则，以在该基类下方的特定深度处停止缩进。这是代码的更新版本，嵌套在第 5 层停止。

HTML：

<ul class="comment">
    <li>level one</li>
    <li>
        <ul>
            <li>level two</li>
            <li>
                <ul>
                    <li>level three</li>

（等等，直到七级）

CSS：

ul {
    list-style:none;
}
ul, li { /* reset the margin and padding */
    margin: 0;
    padding: 0;
}
.comment ul {
     /* 1 em margin for the UL elements under .comment */
    margin-left: 1em;
}
.comment ul ul ul ul ul {
     /* stop the nesting! */
    margin-left: 0;
}

jsfiddle 为此