html - 下一个 child 的对 Angular 线 li 元素/自动增量

Question

我正在努力实现这样的目标:

Element 1

    Element 2

           Element 3

现在，我用这些代码让它起来了:

HTML:

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
....
<li>Element 12</li>
</ul>

CSS:

ul{
  :nth-child(2) {padding-left: 1em;}
  :nth-child(3) {padding-left: 2em;}
   ....
  :nth-child(12) {padding-left: 13em;}
  }

但我想知道是否有更简单或更正确的解决方案来自动执行此操作，因为我的列表中有 10 多个元素。我更喜欢 css 解决方案，因为我的所有内容都是通过 php 生成的，我希望它能够响应。

谢谢

Answer 1

所以我终于找到了一个“CSS”解决方案，SCSS 之一。

ul{
    margin-top: 0;
    @for $i from 2 through 12 {
    $j: 1em;
    :nth-child(#{$i}) {padding-left: $j*$i;}
    }
}

它使增量响应，因为我可以在它周围包含媒体查询。