23.11.2016

Многоуровневые списки с помощью html и css

Как создавать списки в HTML знают почти все. Это просто.

Для маркированного списка используются теги UL и LI.

Вот к примеру:

Списки

Списки

Нумерованные списки создаются с помощью тегов OL и LI:

Списки

Списки

Если попытаться сделать вложенный нумерованный список, получим в итоге следующее:

Списки

Списки

А хотелось бы иметь правильный многоуровневый список, который выглядит так:

1. Первый элемент списка

2. Первый элемент списка

    2.1. Второй уровень вложенности
    2.2. Второй уровень вложенности
    2.3. Второй уровень вложенности

3. Первый элемент списка

4. Первый элемент списка

5. Первый элемент списка

Так вот, для того,чтобы это сделать, нужно прописать стиль:

Списки

Списки

Вот они! Волшебные строчки, котрые нужно добавить в описание стилей:

ol { counter-reset: item }

li { display: block }

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