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

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;
}