Question

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

输出例如可以是：

1.something 2.something 3.something

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

Answer 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/

Answer 2

它仅适用于css，在你的迭代中，只需添加padding-left with index * 5（例如）

 "<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在没有JS的情况下为foreach值设置样式

2 个答案: