使用没有 JS 的 CSS 为 foreach 值设置样式答案

【问题标题】：Styling foreach values with CSS without JS使用没有 JS 的 CSS 为 foreach 值设置样式
【发布时间】：2017-07-03 22:48:35
【问题描述】：

我一直很好奇是否可以仅使用具有如下逻辑的 CSS 将每个值向右移动： <div ng-show="c.reviewId==item.id" style="margin-left:" . {{$index}}*10 . "px"">

例如，输出可能是：

1.something 2.something 3.something

或者你必须为此使用 javascript/angular 吗？

【问题讨论】：

您发布的示例 <div> 已经涉及 Angular。

标签： javascript html css angularjs

【解决方案1】：

试试 CSS Less：

.loop(@n; @i : 1) when (@i =< @n)
{
  div:nth-of-type(@{i}) {
    margin-left: @i*10px 
  }

  .loop(@n; (@i + 1));
}

.loop(6);

生成的代码是这样的：

div:nth-of-type(1) {
  margin-left: 10px;
}
div:nth-of-type(2) {
  margin-left: 20px;
}
div:nth-of-type(3) {
  margin-left: 30px;
}
div:nth-of-type(4) {
  margin-left: 40px;
}
div:nth-of-type(5) {
  margin-left: 50px;
}
div:nth-of-type(6) {
  margin-left: 60px;
}

http://www.lesscss.de/

【讨论】：

【解决方案2】：

这仅适用于 css，在您的迭代中，只需添加带有 index*5 的 padding-left（例如）

 "<div style='padding-left:" + (index * 5).ToString() + "px'>"+index.ToString()+". hello</div>"

这看起来和你需要的一样

        <div style="padding-left: 0px">0. hello</div>
        <div style="padding-left: 5px">1. hello</div>
        <div style="padding-left: 10px">2. hello</div>
        <div style="padding-left: 15px">3. hello</div>
        <div style="padding-left: 20px">4. hello</div>
        <div style="padding-left: 25px">5. hello</div>
        <div style="padding-left: 30px">6. hello</div>
        <div style="padding-left: 35px">7. hello</div>
        <div style="padding-left: 40px">8. hello</div>
        <div style="padding-left: 45px">9. hello</div>

【讨论】：

当发帖人要求提供纯 CSS 解决方案时，您似乎正在使用 JavaScript