如何在订单列表中创建订单列表？

Question

我需要在HTML中的订单列表中创建订单列表。

例如：

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

此代码在视图中不起作用。 如何创建此视图：

1. Coffee
2. Tea
    2-1. Black tea
    2-2. Green tea
3. Milk

谢谢。

Answer 1

由于您需要嵌套列表项的自定义格式，因此您需要使用CSS计数器。

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counter(item)". ";
}
ol ol li:before{
  content: counters(item,"-") ". ";
}

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Answer 2

默认情况下，HTML没有此样式。所以我们需要在这里使用一些CSS。

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

<ol>
  <li>Coffee</li>
  <li>Tea
   <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

<强> 说明：
“计数器”计算李号 每次检测到新的li时，“递增”以递增计数器 当然是 每次新的子列表（即检测到的）时，“计数器重置”都会重置此计数器

希望这会有所帮助。

Answer 3

＆＃13;

＆＃13;

<ol>
  <li>Hey</li>
  <li>
    <ol>
      <li>This is</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>
        <ol>
          <li>Nested list</li>
        </ol>
      </li>
    </ol>
  </li>
    
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Answer 5

您可以使用pseudo元素

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

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>