主页 / 问题 / 750586
Accepted
Nick Volynkin
Asked:2020-11-28 14:00:49 +0000 UTC2020-11-28 14:00:49 +0000 UTC

编号列表的编号模板

  • 772

你需要一个这样的编号列表：

R001。文本
R002。文本
..
R123。文本

要求是：

  1. 列表项标记由一个字符串和一个序列号组成。
  2. 字符串不会改变，但必须明确设置。
  3. 序列号用零填充到所需的位深度，也必须明确指定。

如何在 CSS 中实现这一点？

html

2 个回答

  1. Best Answer

    零变种

    ol.requirement{
  padding-left: 0;
}
ol.requirement li {
  counter-increment: req;
  list-style-type: none;
}

ol.requirement li:before {
  content: "R0" counter(req, decimal-leading-zero) ". ";
}

ol.requirement li:nth-child(n+100):before {
  content: "R" counter(req, decimal-leading-zero) ". ";
}
    <ol class="requirement">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
	<li>text</li>
</ol>

    • 6

  2. 我不仅可以调整零的数量，而且新列表中的缩进太大。

    ol.requirement li {
  counter-increment: req;
  list-style-type: none;
}

ol.requirement li:before {
  content: "R" counter(req, decimal-leading-zero) ". ";
}
    Специальный список:

<ol class="requirement">
  <li>text</li>
  <li>text</li>
</ol>

Для сравнения, обычный список:

<ol>
  <li>text</li>
  <li>text</li>
</ol>

    • 4

相关问题