Question

正在寻找以下订购商品

1a.milk
1b.bread
1c.butter
1d.coffee beans

以下语法不符合我的要求。

<ol>
    <li>milk
        <ol type="a">
            <li>bread</li>
            <li>butter</li>
            <li>coffee beans</li>
        </ol>
    </li>   
</ol>

以上语法显示波纹输出

1.milk
  a.bread
  b.butter
  c.coffee beans

Answer 1

您可以使用CSS计数器，每个lis都有1a-1d（1来自ol计数器，广告来自li计数器。可以将CSS计数器配置为显示多种不同的样式和类型。

编辑-正如@Tomalak在评论中指出的那样-我已对此进行了修改，以将ol样式重置为li-index-并添加了第二个列表来演示结果。第一个列表显示1a-1d，第二个列表显示2a-2d。

我还将其更改为ol结构以更接近OP的请求，但是该概念适用于任何类型的列表（以及任何类型的重复元素）。

.list-wrapper {
    counter-reset: ol-index;
    counter-reset: li-index;
}

ol {
    list-style: none;
    counter-increment: ol-index;
    counter-reset: li-index;
}

ol li {
    counter-increment: li-index;
}

ol li::before {
  content: counter(ol-index) counter(li-index, lower-alpha) ". ";
}

<div class="list-wrapper">
  <ol>
      <li>milk</li>
      <li>bread</li>
      <li>butter</li>
      <li>coffee beans</li>
  </ol>
  <ol>
      <li>paper</li>
      <li>flour</li>
      <li>jam</li>
      <li>biscuits</li>
  </ol>
</div>

如何在HTML有序列表中使用数字和字母

1 个答案: