Question

我有一个嵌套列表的结构，我试图用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，而不必提出新的规则。

Answer 1

你可以做一个小小的舞蹈，除了外部列表之外，每个列表的左边距为-1000，左边距为+1030，因此边框向左延伸，根列表溢出设置为隐藏。它仍然不会任意深入，但您可以通过更改数字来增加最大级别数，而无需添加额外的规则。

Answer 2

如果没有针对每个级别的明确规则，我不知道如何做到这一点。但是，您可以避免将这些规则链接起来，但需要额外增加一些标记：

<!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

设置任意嵌套列表的样式

2 个答案: