代码之家 › 专栏 › 技术社区 › shamim

如何在HTML有序列表中使用数字和字母[重复]

html-lists css html

shamim · 技术社区 · 7 年前

正在查找以下命令

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

1 回复 | 直到 7 年前

gavgrif 7 年前

您可以使用CSS计数器,并为每个lis设置1a-1d(1来自ol计数器,a-d来自li计数器)。CSS计数器可以配置为显示许多不同的样式和类型。

编辑-正如@Tomalak在评论中所指出的-我已经修改了这个来重置ol样式中的li索引-并添加了第二个列表来演示结果。第一个列表显示1a-1d,第二个列表显示2a-2d。

.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>