Question

我有一个垂直导航，子类别包含子类别，依此类推。

第一组的元素需要20px的填充，第二组的填充需要40px，依此类推。结果应该是这样的：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="list-group">
  <a class="list-group-item" href="#">Test 0</a>
  <div class="list-group">
    <a class="list-group-item" href="#" style="padding-left: 40px;">Test 1</a>
    <a class="list-group-item" href="#" style="padding-left: 40px;">Test 1</a>
    <div class="list-group">
      <a class="list-group-item" href="#" style="padding-left: 60px;">Test 2</a>
      <div class="list-group">
        <a class="list-group-item" href="#" style="padding-left: 80px;">Test 3</a>
      </div>
    </div>
  </div>
</div>

但是我想用CSS规则解决它，没有Javascript，也没有把它写入html元素。导航的深层可以是n个元素，我不想实现这样的n个规则：

.list-group .list-group-item {}
.list-group .list-group .list-group-item {}
.list-group .list-group .list-group .list-group-item {}

只有一些CSS规则可以解决这个问题吗？

Answer 1

我会使用ul和li标签来做这样的事情，因为它更容易理解和跟踪。这是我想出来的，就是你在没有javascript的情况下做的事情：

HTML
<ul>
    <li><a href="#">Item1</a>
        <ul>
            <li>Hello</li>
            <li><a href="#"></a>Hello
                <ul>
                    <li>Bye</li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item1</a></li>
</ul>

CSS
ul {
    padding: 0;
}

ul li {
    list-style: none;
}
ul > li {
    padding-left: 20px;
}

如果能解决这个问题，请告诉我！

padding-left取决于subnav deep

1 个答案: