如何用带数字/字母标识符的子列表在HTML / CSS中创建一个有序列表?

问题描述 投票:-2回答:1

一个朋友让我为他们做一个简单的网页,我很困惑–我想在一个有序列表中创建一个有序列表,像这样:

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

但是子列表必须具有自定义字符串作为其“数字”。我可以算出只有字母,但没有数字和字母。

就是这样,但是经过30分钟的谷歌搜索并在counter-incrementcounter-reset上感到困惑,我想知道是否有一种简单的方法来做到这一点?

任何帮助,不胜感激1

css sass html-lists
1个回答
0
投票

这可以解决问题。请注意,这是静态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>
© www.soinside.com 2019 - 2024. All rights reserved.