Question

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

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

这已经缩减了。我没有任何造型可以缩进。根据计算出的样式，没有左边距，但实际上所有内容都是缩进的，我想这是嵌套ul元素的默认行为？

无论如何，在每个嵌套的ul上，我都有一个名为comment-children的类我需要说只有5个可以缩进（所以.comment-children .comment-children .comment-children .comment-children .comment-children完成，很好）但宽度为640px，所有必须关闭嵌套。

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

你想做什么

删除所有默认嵌套，让我通过课程comment-children
在640px处移除所有嵌套。

Answer 1

您的示例不足以演示您要对类comment-children执行的操作，但通常，要删除跨浏览器的列表缩进，您应该实现规则

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

这是updated 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 for this

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

1 个答案: