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 }

Answer 2

受到DON答案的启发，我玩了计数器属性，并成功完成了以下工作：

 ol {
     counter-reset: item;
     list-style-type: none;
 }

 ol li:before {
     font-weight: bold;
     content: counters(item,".")".   "; 
     counter-increment: item;
 }

 ol ol {
     counter-reset: subitem;
     list-style-type: none;
 }

 li li:before {
     content: counters(item,".")"."counters(subitem,".")".   "; 
     counter-increment: subitem;
 }

我不相信这是最干净的解决方案，因为我不太了解内容元素，但是这肯定会给你一个有序列表，根据父容器的最后一个列表项增加子级列表项

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

2 个答案: