Question

我正在尝试列出项目之间的标题的有序列表，例如：

项目1
项目2
项目3
项目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列表项中使用它。

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

2 个答案: