HTML排序列表缩进以保留原始编号 [英] HTML ordered list indent to keep original numbering

问题描述

我有：

我需要缩进一个有序列表来保留父列表项的编号： pre> //我的代码：
< ol>
< li>第1项< / li>
< li>
第2项
< ol>
< li>项目2.1< / li>
< li>第2.2项< / li>
< / ol>
< / li>
< li>第3项< / li>
< / ol>


等等。

现在结果是：

  //结果：
 1.商品1 
 2项目2 
项目1 
项目2 
 3.项目3 
  

<

  //寻找：
 1.商品1 
 2.项目2 
 2.1项目2.1 
 2.2。项目2.2 
 3.项目3 
  

有什么想法？

解决方案

您可以使用计数器来执行此操作：

  OL {counter-reset：item} 
 LI {display：块} 
 LI：before {content：counters（item，。）; counter-increment：item} 
  

I need to indent an ordered list to keep the parent list items numbering:

What I have:

 // 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>

And so forth.

What i'm getting as a result now is:

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

What i'm looking for is:

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

Any ideas?

解决方案

You can use counters to do so:

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

这篇关于HTML排序列表缩进以保留原始编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！