2017-01-23 7 views
1

В этом упорядоченном списке я пытаюсь использовать десятичные числа, но по какой-то причине он не нумеруется, как ожидалось. То, что должно быть сделано для того, чтобы зафиксировать нумерацию для секций B & C и достичь следующего ?:Упорядоченный список не увеличивается должным образом

2) В

2.1) В1

2.2) В2

2.3) В3

3) С

ol { 
 
\t counter-reset: item; 
 
\t list-style-type: decimal; 
 
} 
 
li { 
 
\t display: block; 
 
} 
 
li:before { 
 
content: counters(item, ".") ") "; counter-increment: item 
 
} 
 
<!-- begin snippet: js hide: false console: true babel: false -->
<ol> 
 
    <li><a>A</a> 
 
    </li> 
 
    <ol> 
 
    <li><a>A1</a> 
 
    </li> 
 
    <li><a>A2</a> 
 
    </li> 
 
    <li><a>A3</a> 
 
    </li> 
 
    <li><a>A4</a> 
 
    </li> 
 
    </ol> 
 
    <li><a>B</a></li> 
 
    <ol> 
 
    <li><a>B1</a> 
 
    </li> 
 
    <li><a>B2</a> 
 
    </li> 
 
    <li><a>B3</a> 
 
    </li> 
 
    </ol> 
 
    <li><a>C</a> 
 
    </li> 
 
</ol>

content: counters(item, ".") ". "; counter-increment: item 
} 
 <ol> 
     <li><a>A</a></li> 
     <ol> 
      <li><a>A1</a></li> 
      <li><a>A2</a></li> 
      <li><a>A3</a></li> 
      <li><a>A4</a></li> 
     </ol> 
     <li><a>B</a></li> 
     <ol> 
      <li><a>B1</a></li> 
      <li><a>B2</a></li> 
      <li><a>B3</a></li> 
     </ol><li><a>C</a></li> 
     </ol> 

ответ

4

суб- ol сек необходимости быть внутри li элементов:

ol { 
 
    counter-reset: item; 
 
    list-style-type: decimal; 
 
} 
 
li { 
 
    display: block; 
 
} 
 
li::before { 
 
    content: counters(item, ".")") "; 
 
    counter-increment: item 
 
}
<ol> 
 
    <li> 
 
    <a>A</a> 
 
    <ol> 
 
     <li><a>A1</a> 
 
     </li> 
 
     <li><a>A2</a> 
 
     </li> 
 
     <li><a>A3</a> 
 
     </li> 
 
     <li><a>A4</a> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    <a>B</a> 
 
    <ol> 
 
     <li><a>B1</a> 
 
     </li> 
 
     <li><a>B2</a> 
 
     </li> 
 
     <li><a>B3</a> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    <a>C</a> 
 
    </li> 
 
</ol>