如何更改列表中项目的缩进

Question

我正在尝试在项目之间创建一个带有标题的有序列表，例如：

标题 1

1. 项目 1
2. 项目 2
标题 2
3. 项目 3
4. 项目 4

但是，我希望标题 2 与标题 1 齐平。这是使用的代码（由于我必须遵循样式指南，因此 ul 标记是必要的）。

<ul>
Heading 1
  <ol>
    <li>item 1</li>
    <li>item 2</li>
Heading 2
    <li>item 3</li>
   <li>item 4</li>
  </ol>

</ul>

我只能使用 html，所以任何建议都会很棒

Answer 1

使用两个列表并将第二个列表的起始编号设置为 3

Heading 1
<ol>
  <li>item 1</li>
  <li>item 2</li>
</ol>
Heading 2
<ol start="3">
  <li>item 3</li>
  <li>item 4</li>
</ol>

Answer 2

您需要使用列表项（li 标签），然后在每个标签中包含其他列表。例如：

<ul>
  <li>
    Heading 1
    <ol>
      <li>item 1</li>
      <li>item 2</li>
    </ol>
  </li>
  <li>
    Heading 2
    <ol>
      <li>item 3</li>
      <li>item 4</li>
    </ol>
  </li>
</ul>

这样你就有一个无序列表，其中有两个列表项，然后将有序列表作为嵌入列表。

或者，如果您想让每个子列表中的数字使用相同的计数器，根据您的评论，您可以创建一个 CSS 计数器：

body {
    counter-reset: my-sub-list;
}

ol {
    list-style-type: none;
}

ol li::before {
    counter-increment: my-sub-list;
    content: "" counter(my-sub-list) ". ";
}

    <ul>
      <li>
        Heading 1
        <ol>
          <li>item 1</li>
          <li>item 2</li>
        </ol>
      </li>
      <li>
        Heading 2
        <ol>
          <li>item 3</li>
          <li>item 4</li>
        </ol>
      </li>
    </ul>

我在这里所做的是创建了一个计数器 my-sub-list，并告诉 CSS 在每个 ol 列表项中使用它。