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

【问题标题】：Diagonal li element / automatic increment for next child对角线 li 元素/下一个子元素的自动增量
【发布时间】：2015-01-01 12:07:16
【问题描述】：

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

元素 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 生成的，并且我希望它具有响应性。

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

mr Dikeneko SASS 也是 javascript 程序。我认为它甚至是每个人都使用的 javascript，但至少新学习者不会像 javascript 那样使用 sess ..
我从未说过我在寻找“新学习者”解决方案。它在某种意义上是 CSS，它最终出现在 CSS 文件中。另外，我是一个女孩，不要仅仅因为你不高兴我没有支持你的回答而反对我的回答？认真的吗？
不，没有这样的原因。仅仅因为 sess 是预处理器而不是实际的 css。还有一件事我想提到你这种类型的问题不应该问任何有经验的人，据了解他是初学者。 PHP或.net有什么办法吗？是html吗？？不，这是 HTML 生成器编程。而 sess 不是 css 而是 css 生成器编程。思考。迪克内科小姐。

【解决方案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');
});

【讨论】：