从具有列表编号特定值的有序列表中删除句点 - css

Question

我有一个有序列表，其中包含 "list number" 的特定值。

我看到了增加值的列表的解决方案，但是我的值需要具体且不能更改。

HTML

<td class="list">
  <ol class="junkfood">
    <li value="2">Cookies®</li>
    <li value="1">Chocolate</li>
    <li value="2">Brownies</li>
    <li value="10">Ice cream sandwich</li>
  </ol>
</td>

现在它打印为

2. Cookies
1. Chocolate
2. Brownies
10. Ice cream sandwich

我需要将数字打印为 'values'

2 Cookies
1 Chocolate
2 Brownies
10 Ice cream sandwich

Answer 1

那么您不需要有序列表，您需要无序列表 (ul)

<ul>
    <li value="2">2 Cookies®</li>
    <li value="1">1 Chocolate</li>
    <li value="2">2 Brownies</li>
    <li value="10">10 Ice cream sandwich</li>
</ul>

如您的示例所示，我将值包含在列表项本身中。

2 块饼干
1 块巧克力
2 个核仁巧克力饼
10 冰淇淋三明治

HTH, 埃里克

Answer 2

如果您使用数据属性，CSS 完全可以满足您的需求：

ol {
    list-style:none;
}
li:before {
    content:attr(data-value) ' ';
}

<ol class="junkfood">
    <li data-value="2">Cookies®</li>
    <li data-value="1">Chocolate</li>
    <li data-value="2">Brownies</li>
    <li data-value="10">Ice cream sandwich</li>
</ol>

然而，以这种方式使用 HTML 也是相当奇怪的，因为您正在使用 ordered 列表来表示 unordered 数据。因此，您应该在我的示例中将 <ol> 替换为 <ul> 以确保语义正确。同样的 CSS 也适用于这种方式，这只是表象。

从具有列表编号特定值的有序列表中删除句点 - css

Remove the period from an ordered list that has specific values to the list number - css

html

css

html-lists