CSS - пользовательский список с сохранением десятичного счетчика по умолчанию - PullRequest
Новая
       27

CSS - пользовательский список с сохранением десятичного счетчика по умолчанию

2 голосов
/ 18 сентября 2011

Я делаю кастом ol> li, чтобы он выглядел так

1 | Содержание списка

2 | Содержание списка

3 | Содержание списка

Я ссылался на этот пост: HTML + CSS: упорядоченный список без периода?

Но я не могу заставить цифры появляться, и они должны появляться без точек, следуя стандартному числовому счету.

вот мой код: 

#content ol > li:before{
    content: counter(customlistcounter) " |";
    counter-increment: customlistcounter;
    margin-left: -21px;
    float: left;
    width: 1em;
}
#content ol li{
    padding-left: 21px;

1 Ответ

1 голос
/ 18 сентября 2011

Вы пропустили пару шагов, чтобы заставить его работать там с CSS;прежде всего добавление: #content ol:first-child { counter-reset: customlistcounter;}.Я настроил пример, чтобы вы могли видеть, как он теперь работает правильно: http://jsfiddle.net/n5wx4/

Как говорит другой автор, хотя помните, что это работает только с несколько более новыми браузерами, поэтому IE 6 и 7 отсутствуют.

...