HTML / CSS嵌套排序列表 [英] HTML/CSS nested ordered list

问题描述

- 我尝试为子sub子顺序列表创建CSS。

- 我也想缩进每个子列表。

每个标题的样式如何工作，例如1，2和3

c>< ol>
< li>项目
< ol>
< li> Item< / li>
< li> Item< / li>
< / ol>
< / li>

< li> Item
< ol>
< li> Item< / li>
< li>项目
< ol>
< li> Item< / li>
< li> Item< / li>
< / ol>< / li>
< li> Item< / li>
< li> Item< / li>
< / ol>
< / li>

< li> item< / li>
< / ol>

要实现的输出

  1。项目
 1.1项目
 2.2项目
 
 2.项目
 2.1项目
 2.2项目
 2.2.1项目
 2.2。 2项目
 2.3项目
 2.4项目
 
 3.项目
  

$ b b

CSS

这是我到目前为止所得的结果：

  ol {
 list-style-type：none; 
 count-reset：item; 
} 
 
 li：before {
 content：counters（item，。）。 
 counter-increment：item 
} 
  

解决方案

将您的CSS更新为以下

  ol {counter-reset：item} 
 li {display：block} 
 li：before {content：counters（item，。）; counter-increment：item} 
  

供参考 - http://jsfiddle.net/f3adtsmb/

-I am trying to create the CSS for a sub sub sub ordered list.

-I would also like to indent each sub list.

-How does the styling work for each header, e.g. 1, 2 and 3

HTML

<ol>
  <li>Item
      <ol>
          <li>Item</li>
          <li>Item</li>
      </ol>
  </li>

  <li>Item          
       <ol>
          <li>Item</li>
          <li>Item
            <ol>
              <li>Item</li>
              <li>Item</li>
            </ol></li>
          <li>Item</li>
          <li>Item</li>
       </ol>
   </li>

   <li>item</li>
</ol>

Output to be achieved

1. Item
    1.1 Item
    2.2 Item

2. Item
    2.1 Item
    2.2 Item
      2.2.1 Item
      2.2.2 Item
    2.3 Item
    2.4 Item

3. Item

CSS

This is what I have got so far:

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

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

解决方案

Update your css to following

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

For reference - http://jsfiddle.net/f3adtsmb/

这篇关于HTML / CSS嵌套排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！