Question

我想知道如何创建一个有序列表，如下所示。

一个。第1项

湾第2项

℃。第3项

℃。第4项

...

我通常认为下面的标记应该按照我想要的方式进行：

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li value="ç">Item 4</li>
    ...
</ol>

但它似乎没有效果，只是给我定期订购“a，b，c，d ......”

Answer 1

通常，列表不会那样工作。使用list-style-type lower-latin时，只会显示小写拉丁字母。在“z”之后，它继续“aa”，依此类推。

但是，使用一些自定义CSS完全可以做到你想要的。

li[value] {list-style-type:none; position:relative}
li[value]::before {content:attr(value) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li value="ç">Item 4</li>
    <li>Item 5</li>
</ol>

很抱歉，上述解决方案仅有效，因为value属性是非数字值。如果您放置value="9"或其他内容，它将干扰列表其余部分的编号：下一个项目的值为10，它将获得“j”。作为列表标记！

因此，更好的解决方案是单独保留value并使用data属性。 data-marker或其他什么。然后列表的其余部分不会受到任何后果。

li[data-marker] {list-style-type:none; position:relative}
li[data-marker]::before {content:attr(data-marker) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-marker="ç">Item 4</li>
    <li>Item 5</li>
</ol>

另一方面说明：如果您打算在非重音字母之间插入重音字母，例如，如果列表看起来像a，b，c，ç，d等，那么将需要使用value才能使列表正确。无序的列表项需要重新同步！

li[data-marker] {list-style-type:none; position:relative}
li[data-marker]::before {content:attr(data-marker) '. ';
position:absolute; right:calc(100% + .33em);}

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-marker="ç" value="3">Item 4</li> <!-- Items 3 & 4 both get value 3 for "c" -->
    <li>Item 5</li>
</ol>

HTML自定义列表排序（带有非英文字符的字母列表）

1 个答案: