时间戳

首页 > 解决方案 > 如何使用带有组合数字/字母标识符的子列表在 HTML/CSS 中制作有序列表？

css - 如何使用带有组合数字/字母标识符的子列表在 HTML/CSS 中制作有序列表？

问题描述

编辑：收到不赞成票的消息（我应该尝试并发布一些解决问题的方法），吸取教训，所以我希望不再被反对票......

一个朋友让我为他们做一个简单的网页，我被一件事难住了——我想在有序列表中做一个有序列表，如下所示：

1. something
2. something else
3. something different
  3a. and a sub thing
  3b. and another sub thing

但是子列表必须有自定义字符串作为它的“数字”。我可以弄清楚只有字母，而不是数字和字母。

就是这样，但是经过 30 分钟的谷歌搜索和对 and 感到困惑之后counter-increment，counter-reset我想知道是否有一种简单的方法可以做到这一点？

非常感谢任何帮助1

标签： csssasshtml-lists

解决方案

这会成功的。请注意，这是静态 HTML，您必须手动添加数字，它绝不是自动化解决方案。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: letter-counter;
}
ul {
list-style-type: none;
}
li li::before {
  counter-increment: letter-counter;
  content: "3" counter(letter-counter, lower-alpha) ". ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item
<ul><li>sub-item</li>
<li>sub-item</li>
<li>sub-item</li></ul></li>
</ol>
</body>
</html>

推荐阅读