Question

有没有办法使用CSS缩进每个列表项？

这是一个正常的清单：

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

显示如下：

One
  Two
    Three
      Four

Answer 1

在这里，您可以使用带有透明边框的:before伪元素。您可以通过更改伪元素的宽度来变量列表项的缩进。除此之外，您可以更改列表标记（如果设置list-style: none;并设置color的{{1}}

编辑：

已移除content和display: block，并将空格字符color: transparent用作内容。

\00a0

li:before {
    float: left;
    content: "\00a0";
    width: 20px;
    border: 1px solid transparent;
}

以下更改列表标记稍微复杂一点（@dippas建议删除<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>，但display: block而border-top由于某种原因不起作用）

border

ul {
   list-style: none;
   counter-reset: cnt;
}

li:before {
   float: left;
   counter-increment: cnt;
   content: counter(cnt)" \25b6";
   max-height: 100%;
   width: 29px;
   border: 1px solid transparent;
   margin-top: -.1em;
   color: green;
}

Answer 2

如果你有很多list-items，那么@Banzay提供的answer更干净，但如果你只有少数，那么你可以使用nth-child

li:first-child {
  margin-left: 10px
}
li:nth-child(2) {
  margin-left: 20px
}
li:nth-child(3) {
  margin-left: 30px
}
li:nth-child(4) {
  margin-left: 40px
}
/*just demo*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

CSS - 缩进列表项

2 个答案:

编辑：