Question

我想知道是否有办法为每个下一个项目添加额外的margin-left，例如

-Item1
  -Item2
    -Item3
      -and so forth

CSS3可以实现吗？我没有看到任何“下一个项目”。

Answer 1

当然，你可以。但这很怪异......

演示：http://jsbin.com/exuwej/1/edit

CSS：

ul {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    display: block;
    width: 500px;
    padding: 0;
    margin-left: 100px;
    margin-top: -50px;
    list-style: none;
    height: 400px;
}

ul li {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    width: 60%;
    border: 1px solid blue;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    text-align: left;
}

HTML：

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Answer 2

如果没有javascript，无法无限期地执行此操作，但可以为其编写少量CSS选择器。虽然我会建议不要出于其他人已经说过的原因这样做。

li {
    margin-left: 20px;
}
li+li {
    margin-left: 40px;
}
li+li+li {
    margin-left: 60px;
}
li+li+li+li {
    margin-left: 80px;
}

CSS3：使下一个项目缩进更多

2 个答案: