HTML 有序列表缩进以保持原始编号

Question

我需要缩进有序列表以保持父列表项的编号:

我有什么:

 // My code:
 <ol>
      <li>Item 1</li>
      <li>
           Item 2
           <ol>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
           </ol>
      </li>
      <li>Item 3</li>
 </ol>

等等。

我现在得到的结果是:

      // Result:
      1. Item 1
      2. Item 2
           Item 1
           Item 2
      3. Item 3

我正在寻找的是:

      // Looking for:
      1. Item 1
      2. Item 2
           2.1 Item 2.1
           2.2. Item 2.2
      3. Item 3

有什么想法吗？

Answer 1

您可以使用 counters这样做:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }