Question

你好，

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

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

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

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

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

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

2. ...
2. ...

有什么方法可以在<ol>元素内获得理想的结果吗？还是我必须用浮动和边距创建自己的“列表”？

编辑：为了使事情更清楚-我不能编辑或重新格式化这些列表，因为它们是法律。例如看： 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元素中删除默认列表样式类型时...

感谢您的任何想法和帮助！：）

Answer 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?

HTML：有没有一种方法可以将<li>元素的“值”设置为字符串，而不是数字

1 个答案: