Нумерация многоуровневых вложенных списков HTML/CSS

Есть ли способ получить нумерацию ниже, используя прямые списки HTML и CSS (<ul> или <ol>)?Нумерация многоуровневых вложенных списков HTML/CSS

1. Link 1 
2. Link 2 
3. Link 3 
    3.1. Link 3.1 
    3.2. Link 3.2 
    3.3. Link 3.3 
4. Link 4 
    4.1. Link 4.1 
     4.1.1 Link 4.1.1 
     4.1.2 Link 4.1.2 
5. Link 5

Заранее благодарен!

источник

2014-02-20 MrUpsidown

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_gen_counter-reset – Bart

Вы можете использовать CSS counters:

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

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

WORKING DEMO.

источник

2014-02-20 13:50:16

Я хотел бы отметить, что ': before' и': after' являются псевдо-элементы, и должны использовать двойной colons (':: before'), хотя это не будет работать в IE8. – Bart

Отлично! Большое спасибо за это! – MrUpsidown

@Bart * CSS Counters * является частью [CSS2.1] (http://www.w3.org/TR/CSS2/generate.html#generate.html#counters) и работает в [IE8 также] (http://caniuse.com/#feat=css-counters). Но о псевдоэлементах: более ранние версии веб-браузеров (IE8, Opera4-7) использовали один двоеточие для * псевдоэлементов * и * псевдо-классов *, поэтому мы использовали один цвет для поддержки старых браузеров. –

<style> 
OL { counter-reset: item } 
LI { display: block } 
LI:before { content: counters(item, ".") " "; counter-increment: item } 
</style> 
<html> 
<body> 

<ol> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3 
<ol > 
    <li>Link 3.1</li> 
    <li>Link 3.2</li> 
    <li>Link 3.3 
<ol > 
    <li>Link 3.3.1</li> 
    <li>Link 3.3.2</li> 
    <li>Link 3.3.3</li> 
</ol> 
</li> 
</ol> 
</li> 
</ol> 

</body> 
</html>

источник

2014-02-20 14:02:37

Нумерация многоуровневых вложенных списков HTML/CSS

ответ

Смежные вопросы