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的默认演示文稿将为您执行此操作，适用于任意级别。您的示例将是无序列表＆lt; ul＆gt;有三个列表项＆lt; li＆gt;。第一个列表项包含文本“Item”和嵌套的＆lt; ul＆gt;一个项目，其中包含一个项目的嵌套列表。等等。

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

ul { list-style-type: none; }

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

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

Answer 3

HTML应该为您执行此操作，因此如果您为＆lt; li＆gt;单独保留边距和填充设置。元素，只是摆弄其他设置，如字体大小，颜色等，一切都应该正常。

例如，这应该使每个列表项变为粗体并显示项目符号图像的圆圈，并仍保留缩进：

<style type="text/css">
            li
            {
                font-weight: bold;
                list-style-type: circle;
            }
</style>

在CSS中格式化缩进列表

3 个答案: