html - 避免使用多个 ul 来创建“对角线”列表

Question

我正在尝试创建一个倾斜/对角线列表，但想避免有几个嵌套的 uls，有没有办法做到这一点，这是我到目前为止的代码：

<ul className={style.steps}>
  <li>
    <p className={style.step}>Lorem</p>
    <ul className={style.steps}>
      <li>
        <p className={style.step}>Ipsum</p>
        <ul className={style.steps}>
          <li>
            <p className={style.step}>dolor</p>
            <ul className={style.steps}>
              <li>
                <p className={style.step}>sit</p>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

标签： htmlcss

Answer 1

如果您可以更新代码输出方式，则不需要第 n 个选择器，特别是如果列表是动态的并且更改长度，则可以使用 CSS vars。

您可以使用 设置默认值:root，然后可以在每个 li 元素上添加自定义属性值--index: number。您可以将元素上的 CSS var 更改为您需要的任何内容。

:root {
  --margin-value: 10px;
}

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  margin-left: calc(var(--index) * var(--margin-value));
}

<ul>
  <li style="--index: 1">One</li>
  <li style="--index: 2">Two</li>
  <li style="--index: 3">Three</li>
  <li style="--index: 4">Four</li>
  <li style="--index: 5">Five</li>
</ul>