造型任意嵌套列表

我有一個嵌套列表的結構，我試圖用CSS來設計它們。我希望每個級別的縮進比前一個更多，但是我希望每個列表的頂部邊框都一直延伸到父列表的末尾。這裏是我的：造型任意嵌套列表

<!DOCTYPE html> 
<html><head> 
<title>nested list test</title> 
<style type="text/css"> 
ul, li { 
    margin: 0; padding: 0; list-style: none; 
} 
#outer { 
    width: 300px; border: solid black 2px; 
} 
#outer ul { 
    border-top: solid #bbbbbb 1px; 
} 
#outer > li > ul > li > span { 
    padding-left: 30px; 
} 
#outer > li > ul > li > ul > li > span { 
    padding-left: 60px; 
} 
</style> 
</head> 
<body> 
<ul id="outer"> 
    <li><span>Item 1</span></li> 
    <li><span>Item 2</span> 
    <ul> 
     <li><span>Item 2a</span></li> 
     <li><span>Item 2b</span> 
     <ul> 
      <li><span>Item 2b1</span></li> 
      <li><span>Item 2b2</span> 
      <ul> 
       <li><span>Item 2b2a</span></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 
</body></html>

你可以在http://jsfiddle.net/pwaxQ/1/看到它。它有3個級別時正常工作，但如果我添加一個4級，它會中斷。我可以添加更多的規則以使其可以在4個關卡中工作，但是如果我添加第5個關卡，它會中斷。等等。我可以很容易地使用Javascript來工作，但我想知道是否有辦法讓這個佈局能夠處理任何深度，只使用CSS，而不必提出新的規則。

來源

2011-05-03 Elias Zamaria

你可以做一些小小的舞蹈，除了外部列表外，每個列表的左邊界爲-1000，左邊界爲+1030，這樣邊界向左延伸很遠，而根列表有溢出設置爲隱藏。它仍然不會受到任何深度的影響，但是您可以通過在不添加額外規則的情況下更改數字來增加最大級別數。

來源

2011-05-03 23:04:15 LaC

我做了像你說的東西。我將margin和padding應用於除了外部列表之外的所有列表，並將外部列表中的溢出設置爲隱藏。這並不是任意的，但至少它將規則的數量保持在可管理的水平。 – 2011-05-03 23:33:08

我不明白如果沒有明確的規則爲每個級別如何做。您可不必鏈這樣的規則，然而，在一點點額外的標記的成本：

<!DOCTYPE html> 
<html><head> 
<title>nested list test</title> 
<style type="text/css"> 
ul, li { 
    margin: 0; padding: 0; list-style: none; 
} 
    #outer { 
    width: 300px; border: solid black 2px; 
} 
#outer ul { 
    border-top: solid #bbbbbb 1px; 
} 

#outer .level1 li > span { padding-left: 30px; } 
#outer .level2 li > span { padding-left: 60px; } 
#outer .level3 li > span { padding-left: 90px; } 

</style> 
</head> 
<body> 
<ul id="outer"> 
    <li><span>Item 1</span></li> 
    <li><span>Item 2</span> 
    <ul class="level1"> 
     <li><span>Item 2a</span></li> 
     <li><span>Item 2b</span> 
     <ul class="level2"> 
      <li><span>Item 2b1</span></li> 
      <li><span>Item 2b2</span> 
      <ul class="level3"> 
       <li><span>Item 2b2a</span></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

</body></html>

如果您正在使用SASS，你甚至可以做的不是非常有用的，但酷這樣的東西來遍歷儘可能多的水平，你需要：

!levels = 10 
@for !i from 0 to !levels 
    #outer ul.level#{!i} > li 
    padding-left: #{!i*30}px

來源

2011-05-04 07:39:43 Thilo

造型任意嵌套列表

回答

相關問題