在CSS中格式化缩进列表

Question

假设我有一个列表,其中包含任意数量的缩进级别,如下所示:

Item
  Item
    Item
Item
  Item
Item
  Item
  Item
    Item
      Item
        Item

如果我在HTML文档中显示此列表,我如何使用CSS来处理缩进？可能存在任意数量的缩进级别(尽管实际上不会超过5个左右).

我不想创建一个缩进10个像素的"indent1"类,一个缩进20个像素的"indent2"类等 - 这很笨拙.是否可以创建一个通用规则,该规则将根据属性值或层次结构中元素的位置缩进一定距离？

Answer 1

你会这样做:

http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_nestedlists2

<li>如果你愿意,可以将元素设置为没有子弹.

Answer 2

只需嵌套您的列表，HTML 的默认演示文稿就会为您执行此操作，适用于任意数量的级别。您的示例将是一个包含三个列表项 <li> 的无序列表 <ul>。第一个列表项包含文本“Item”和一个项的嵌套 <ul>，后者又包含一个项的嵌套列表。等等。

要抑制项目符号，请在样式表中包含此 CSS：

ul { list-style-type: none; }

要抑制顶级列表的缩进，首先隐藏所有列表的左边距，然后为嵌套列表恢复它。（显然，有些浏览器在默认列表缩进中使用填充而不是边距，因此将两者都设置为安全。）

ul { margin-left: 0; padding-left: 0; }
ul ul { margin-left: 1.5em; padding-left: 1.5em; }