对角线li元素/下一个孩子的自动增量

Question

我想尝试这样的事情：

  

元素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 one。

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

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

Answer 2

试试这个(demo)

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

jquery的

var count = 20;
$('ul').find('li').each(function(){
    count += 20;
    $(this).css('padding-left','+='+count+'px');
});