如何在 HTML 的有序列表中使用自定义格式的数字？

Question

I'd like to have a custom format of numbers in an ordered list in a HTML document.我想在 HTML 文档的有序列表中使用自定义格式的数字。 It's nothing specific right now, but these are ones that I wanted in the past or may want in the future:现在没有什么具体的，但这些是我过去想要或将来可能想要的：

with a colon at the end:最后有一个冒号：

1: one 1：一个
2: two 2：两个
3: three 3：三
in binary:二进制：

1. one 1. 一
10. two 10. 两个
11. three 11. 三
as Mayan numerals:作为玛雅数字：

one一
two二
three三

They are examples of how this list would be displayed:它们是如何显示此列表的示例：

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

The format can be set in CSS to one of the predefined ones by setting list-style-type , but this is very limited and I can't find a way to customise the number format in any other way.可以通过设置list-style-type在 CSS 中将格式设置为预定义的格式之一，但这非常有限，我找不到以任何其他方式自定义数字格式的方法。

I imagine that the formatting would be done by a Javascript function that would get the number and return its format as a string, but I don't know how I can use Javascript in CSS. I imagine that the formatting would be done by a Javascript function that would get the number and return its format as a string, but I don't know how I can use Javascript in CSS.

How can I do that?我怎样才能做到这一点？ Is it even possible?甚至可能吗？

Answer 1

With a colon at the end:结尾有一个冒号：
1: One 1：一个
2: Two 2：两个
3: Three 3：三个
4: FOUR 4：四个

<!DOCTYPE html>
<html>
<style>

ol {
  list-style:none;
  counter-reset: ol-ten-base-counter;
}
ol li {
  counter-increment: ol-ten-base-counter;
  margin-bottom: 1rem;
}
ol li::before {
  margin-right: 0.2rem;
  content: counter(ol-ten-base-counter)":";
}



body {
  padding: .5rem;
  font-family: sans-serif;
}

</style>
<body>

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

</ol>
</body>
</html>

In binary: A) One way is to use javascript and make a function as below to change base 10 to base 2: (It can be written even better based on the framework you use)二进制： A) 一种方法是使用 javascript 并如下制作 function 以将基数 10 更改为基数 2：（根据您使用的框架，它可以写得更好）

 <ol> <li value={Number(1).toString(2)}>One </li> <li value={Number(2).toString(2)}>Two </li> <li value={Number(3).toString(3)}>Three </li> </ol>

B) One way is to use CSS but this code works in binary only until 100 after that it will be 10 base again. B）一种方法是使用 CSS 但此代码仅在二进制文件中有效，直到 100 之后它将再次变为 10 基数。 if you need more, you have to provide t如果您需要更多，您必须提供

 <:DOCTYPE html> <html> <style> @counter-style binary-ol { system; fixed: symbols: '1' '10' '11' '100' '101' '110' '111' '1000' '1001' '1010' '1011' '1100' '1101' '1110' '1111' '10000' '10001' '10010' '10011' '10100' '10101' '10110' '10111' '11000' '11001' '11010' '11011' '11100' '11101' '11110' '11111' '100000' '100001' '100010' '100011' '100100' '100101' '100110' '100111' '101000' '101001' '101010' '101011' '101100' '101101' '101110' '101111' '110000' '110001' '110010' '110011' '110100' '110101' '110110' '110111' '111000' '111001' '111010' '111011' '111100' '111101' '111110' '111111' '1000000' '1000001' '1000010' '1000011' '1000100' '1000101' '1000110' '1000111' '1001000' '1001001' '1001010' '1001011' '1001100' '1001101' '1001110' '1001111' '1010000' '1010001' '1010010' '1010011' '1010100' '1010101' '1010110' '1010111' '1011000' '1011001' '1011010' '1011011' '1011100' '1011101' '1011110' '1011111' '1100000' '1100001' '1100010' '1100011' '1100100' } ol{ list-style-type; binary-ol; } </style> <body> <h1>The p element</h1> <ol> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> </ol> </body> </html>

Mayan numerals (I am not sure if it is called like this haha)玛雅数字（不知道是不是这样叫哈哈）

: One ：一

: Two ：二

: Three ：三

: FOUR : 四

 <:DOCTYPE html> <html> <style> ol { list-style;none: } ol li { margin-bottom; 1rem: } ol li::before { margin-right. 0;2rem: content; "": } body { padding. ;5rem: font-family; sans-serif; } </style> <body> <ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ol> </body> </html>

如何在 HTML 的有序列表中使用自定义格式的数字？

问题描述

1 个解决方案

解决方案1
0 2022-01-12 18:06:02

如何在 HTML 的有序列表中使用自定义格式的数字？

问题描述

1 个解决方案

解决方案1 0 2022-01-12 18:06:02

解决方案1
0 2022-01-12 18:06:02