带有特殊编号的有序 HTML 列表——有什么简单的方法吗？ [关闭]答案

【问题标题】：Ordered HTML list with special kind of numbering — is there any simple way? [closed]带有特殊编号的有序 HTML 列表——有什么简单的方法吗？ [关闭]
【发布时间】：2020-02-05 21:24:45
【问题描述】：

请问如何在 HTML 中用这种编号制作一个列表？

(01) 物品物品物品物品
(02) 物品itemititem
(03) 物品itemititem
(04) 物品itemititem

但是请注意，我只是完全的业余爱好者，所以我需要非常简单友好的解释。谢谢。

【问题讨论】：

“编号”是什么意思？此外，我们希望至少有一些代码可以显示您尝试过的内容，即使它不起作用。请看一下How to Ask，也许minimal reproducible example 也有用
会：ol{list-style:decimal-leading-zero}足够吗？请添加您的 HTML 代码和您的 CSS 尝试
您应该将您的代码添加到问题中，并且是最有用的，这样您就可以获得有效的帮助，没有人必须猜测是否愿意提供帮助，您不会得到反对票，也不会收到封闭的问题 :) 欢迎就这样。
Welcome to StackOverflow - 请阅读我们的How to Ask 页面和edit 您的问题以改进它。好的问题往往会从社区中得到更快、更好的答案。

标签： html css list

【解决方案1】：

如果还需要看到( 和)，您可以使用counter：

counter() CSS 函数返回一个字符串，表示指定计数器的当前值（如果有的话）。它通常与伪元素一起使用，但理论上可以在任何支持值的地方使用。

ol {
  list-style-type: none;/* remove the marker */
  /* mind also other list style */
  counter-reset: count;
}

li {
  counter-increment: count;
}

li::before {
  content: "(" counter(count, decimal-leading-zero) ") ";
}

<ol>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
  <li> Item</li>
</ol>

【讨论】：

【解决方案2】：

您需要使用禁用默认列表样式类型，并使用计数器属性和伪元素 ::before https://www.w3schools.com/css/css_counters.asp 使用自定义列表样式类型。

有了这个属性，你可以将它与其他东西一起使用

ol {
  list-style-type: none;
  counter-reset: step;
}

li {
  counter-increment: step;
}

li:before {
  content: "("counter(step, decimal-leading-zero)") ";
}

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

【讨论】：

【解决方案3】：

您只需要添加列表样式类型：

ol { list-style-type: none;counter-reset: item;padding:0 }
li { counter-increment: item; }
li:before { content: " ("counter(item,decimal-leading-zero)") "; }

<ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>

【讨论】：

不太确定这一点，( & ) 可能仍然在这里丢失 ;)
查看更新的答案
OP 在几分钟前对此进行了澄清:)

【解决方案4】：

在 HTML 中，您可以使用 <ol> 标记。这代表有序列表，将为您的列表项编号。

列表项将使用<li> 标记。这代表列表项。

例如：

    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>

【讨论】：

这不能回答问题。它将产生 1,2,3...而不是 01,02,03