Реклама - здесь может быть Ваша реклама, которую увидят 4000+ человек в сутки. Хотите 1000 посетителей на свой сайт за 50 копеек?

Многоуровневые списки как в MS Word

Как с помощью HTML/CSS можно верстать многоуровневые нумерованные списки "как в ворде". В тот момент мне в голову пришел только извратный вариант использования list-style-image или background-image, где нумерация типа <1.3.> задавалась бы графикой. Дурацкая идея, конечно.

Но пару дней назад я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, при этом будет сохранена семантика в HTML. Единственное (но самое важное!) ограничение - абсолютно правильно работает пример только в Opera 7.0. Я тестировал в более ранних версиях этого браузера (нумерация в списках нарушается), а также в Mozilla 1.0 и Internet Explorer 6.0 (априори не должно работать) - увы и ах. Возможно, в более свежих версиях Gecko-based браузеров всё хорошо, я не могу сказать.

Итак, смотрите в Opera 7.0 или Mozilla Firefox 2.0 следующий пример:

one
1. one-one
  1. one-one-one
  2. one-one-two
  3. one-one-three
2. one-two
3. one-three
two
three
1. three-one
2. three-two
3. three-three

Здорово, правда? Решается всё следующим CSS кодом (за основу взят пример на w3c.org):

ol>li{
display:block
}

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

Обратите внимание на пробел во фрагменте ". ". С его помощью мы создаём отступ между нумерацией и текстом. CSS 2 селекторы (ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.

HTML код получается простым и семантически верным:

<ol>
<li>one
    <ol>
    <li>one-one
        <ol>
        <li>one-one-one</li>

        <li>one-one-two</li>
        <li>one-one-three</li>
        </ol>
    </li>
    <li>one-two</li>
    <li>one-three</li>

    </ol>
</li>
<li>two</li>
<li>three
    <ol>
    <li>three-one</li>

    <li>three-two</li>
    <li>three-three</li>
    </ol>
</li>
</ol>

Теорию про счётчики и автоматическую нумерацию можно почитать в спецификации.

Danil Ivanov (Mash) предложил вариант для IE 5+ и Mozilla.

Автор: Шуркаев Александр Владимирович
Источник: Заметки HTML кодера