HTML：有没有办法将 <li> 元素“值”设置为字符串，而不是数字答案

【问题标题】：HTML: Is there a way to set the <li> elements "value" to a string, not a numberHTML：有没有办法将 <li> 元素“值”设置为字符串，而不是数字
【发布时间】：2019-06-15 12:20:11
【问题描述】：

你好，

我正在处理一些需要转换为 HTML 的复杂列表结构。这是我的问题：

有序列表确实具有固定的列表项值，如下所示：

1. ...
2. ...
2a. ...
2b. ....

所以我的第一个想法是，使用 HTML-List-Elements 的“值”属性。喜欢：

<ul>
    <li value="2">...</li>
    <li value="2a">...</li>
</ul>

但是，由于 List-Element-Value 只接受数字，它会打印：

2. ...
2. ...

有什么方法可以在<ol>-Element 中获得所需的结果？还是我必须创建自己的带有浮动和边距的“列表”？

编辑：为了清楚起见 - 我不能编辑或重新格式化这些列表，因为它们是法律。例如，看看： https://www.gesetze-im-internet.de/stgb/__5.html

我不能在这里简单地使用嵌套元素，因为这不是法律所写的方式。

编辑 2：我现在想出的最好的办法是给我的 <li> 元素一个属性，如 data-li-value="2a." 并在我的 css 中执行如下操作：

[data-li-value]::before {
    content: attr(data-li-value) " ";
    float: left;
    margin-right: 2rem;
    margin-right: .5rem;
    margin-left: -.5rem;
}

同时从 li 元素中删除默认列表样式类型...

感谢您的任何想法和帮助！ :)

【问题讨论】：

嘿...你看到这个链接developer.mozilla.org/en-US/docs/Web/CSS/list-style-type@errori
我认为这应该可以回答您的问题：stackoverflow.com/questions/10405945/…，基本上您需要在第二个 <li> 元素（ 2）创建2.1、2.2等
感谢您的链接。我知道这些链接，但它们无济于事。我更新了我的问题以澄清问题。

标签： html html-lists

【解决方案1】：

这个解决方案似乎对我有用：

<!DOCTYPE html>
<html>

<head>
    <title>Custom li item</title>
    <style type="text/css">

        ol {
            /* 
            This may be needed if the first item is not a section item

            counter-increment: counter;
            */
            counter-reset: counter;
            list-style: none;
        }

        .single-item:before {
            counter-increment: counter;
            content: counter(counter) ") ";
        }

        .section {
            counter-increment: counter;
            counter-reset: section
        }

        .section-item:before {
            counter-increment: section;
            content: counter(counter) counter(section, lower-alpha) ") ";
        }

    </style>
</head>

<body>
    <ol>
        <li class="section-item section">Part 1a</li>
        <li class="section-item">Part 1b</li>
        <li class="single-item">Part 2</li>
        <li class="single-item">Part 3</li>
        <li class="section-item section">Part 4a</li>
    </ol>

</body>

</html>

CSS 计数器上的这些链接也可能很有帮助。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Ordered list (HTML) lower-alpha with right parentheses?

【讨论】：