在CSS格式的缩进列表

比方说，我有一个列表，与缩进层次任意数量的，就像这样：在CSS格式的缩进列表

Item 
    Item 
    Item 
Item 
    Item 
Item 
    Item 
    Item 
    Item 
     Item 
     Item

如果我显示此列表中的HTML文档中，我该如何使用CSS来处理缩进？可能会有任意数量的缩进级别（尽管实际上不会超过5个左右）。

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

2010-06-16 Colen

你会做像这样：

如果你喜欢的话，并且风格<li>元素不要有子弹。

2010-06-16 00:06:09 Strelok

HTML应该为你做这件事，所以如果你只为< li>元素留下边距和填充设置，并且只是摆弄其他设置（如字体大小，颜色等），一切都应该正常工作。

例如，这应该使每个列表项大胆，显示子弹点像一个圆，仍保留缩进：

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

2010-06-16 00:05:44 vimist

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

为了抑制子弹，包括在样式表这个CSS：

ul { list-style-type: none; }

为了抑制顶级列表的缩进，首先隐藏所有列出的左边界，那么对于嵌套列表恢复它。（显然有些浏览器使用的填充，而不是利润率为他们的默认列表缩进，所以设置既要安全。）

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

2010-06-16 15:53:17

回答