在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

回答