Ol html не нумерует

Нумерованные списки

, который и применяется для создания списка. В качестве нумерующих элементов могут выступать следующие значения:

• арабские цифры (1, 2, 3, . );
• арабские цифры c нулём впереди для цифр меньше десяти (01, 02, 03, . 10);
• прописные латинские буквы (А, В, С, . );
• строчные латинские буквы (а, b, с, . );
• римские цифры в верхнем регистре (I, II, III, . );
• римские цифры в нижнем регистре (i, ii, iii, . );
• армянская нумерация;
• грузинская нумерация.

С практической точки зрения, принципы отображения элементов маркированного списка могут аналогичным способом применяться и к нумерованному списку. Но учитывая, что мы имеем дело с перечислением, существуют некоторые особенности, о которых и пойдёт речь далее.

Нумерация списка

или value у элемента
. В качестве значения указывается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value , то последний имеет большее преимущество, и нумерация отображается с числа, указанного value , как показано в примере 1.

Пример 1. Изменение нумерации списка

Первый элемент списка в данном примере будет начинаться с римской цифры IV, поскольку указан атрибут start=»4″ , затем идет номер V, а последний элемент следует не по порядку и назначается номером X (рис. 1).

Рис. 1. Римские цифры в списке

Написание чисел

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 2 или нечто подобное.

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment . Вначале для селектора ol требуется задать counter-reset : item , это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none .

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before . Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item . Окончательный код показан в примере 3.

Пример 3. Изменение вида списка

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

Список с русскими буквами

Нумерованный список есть с латинскими буквами, а вот русских букв для списка нет. Их можно добавить искусственно, воспользовавшись вышеприведённым приёмом. Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 4).

Пример 4. Код для создания списка

Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content . Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1) , в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 5).

Пример 5. Применение псевдокласса :nth-child

.cyrilic li:nth-child(1)::before < content: 'а)'; >.cyrilic li:nth-child(2)::before < content: 'б)'; >.cyrilic li:nth-child(3)::before

В этом примере после каждой буквы идёт круглая скобка, все буквы строчные. Вы можете определить собственный вид нумерации списка, к примеру она может содержать заглавные буквы с точкой, с одной или двумя скобками или одни только буквы. В отличие от стандартной нумерации мы здесь вольны делать что угодно. Списка из десяти букв должно хватить практически для всех ситуаций, но если этого внезапно окажется мало, ничего не мешает расширить наш список, включив в него хоть все буквы русского алфавита.

Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 6).

Пример 6. Список с русскими буквами

Результат данного примера показан на рис. 3.

Рис. 3. Русские буквы в списке

Плюсов у данного метода добавления нумерации много.

• Можно использовать буквы любого алфавита, не только русского.
• Мы сами определяем, включать в список спорные буквы, такие как Ё и Й, или нет.
• Вид нумерации и оформление букв устанавливается через CSS.
• Список легко расширить, а также сделать вложенные списки.
• Можно создать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой.

См. также

• :nth-child()
• Вложенные списки
• Маркированные списки
• Псевдокласс :nth-child
• Псевдокласс :nth-last-child
• Псевдоклассы в CSS
• Создание списков
• Списки
• Текст в HTML

Источник

Упорядоченный список (ol) отображается ненумерованным?

У меня есть упорядоченный список (ol) на моей странице, но нумерация вообще не отображается! Я сделал это:

Поскольку я ввел вышеупомянутое, stackoverflow смог правильно отобразить его так, как я хотел, например:

Однако на моей веб-странице этого не происходит. Я просматриваю это в Firefox на своем локальном хосте.

Если кто-нибудь знает, почему мои ol выглядят как ul (т.е. без нумерации), я был бы благодарен за помощь. Если нет, дайте мне знать, как я могу получить нумерованный список с помощью ul.

17 ответов

Это будет проблема с CSS. CSS может изменить стиль нумерации / маркера и даже полностью отключить его. Используя Firebug, проверьте элемент и посмотрите на стили CSS справа, чтобы увидеть, какие стили к нему применяются. Ищите одного по имени list-style .

Я использовал firebug, чтобы посмотреть на любые свойства, которые он наследует, но они не могут повлиять на ol! Я специально искал list-style , но ничего! 🙁

Хотя, скорее всего, проблема заключается в list-style-type , особенно если вы использовали таблицу стилей сброса, вы также можете убедиться, что margin-left / padding-left в списке достаточно велик, чтобы числа может вписаться в пространство.

Кроме того, возможно, стоит добавить list-style-position: inside; , чтобы просто посмотреть, генерируются ли / применяются ли числа браузером.

Очень странная ситуация, числа и маркеры для моих ol и ul отображаются в Adobe Dreamweaver CS6. Они не отображались ни в одном браузере. Веб-сайт обернут блоком display: block для всего веб-сайта. Мне пришлось ввести приведенный ниже CSS, чтобы отобразить числа и маркеры.

Это сработало, чтобы показать числа, но убило inline-block , хотя float: left; допускает оба эффекта.

Попробуйте list-style-type: decimal; в своем CSS для ol .

Вот еще несколько значений, которые вы можете использовать.

Хорошо, у меня была та же проблема, и все, что я сделал, было установлено в определении LI ‘display: list-item;’. Это было заменено на display: block; в другом месте.

Я также изменил позицию в стиле списка изнутри на внешнюю, чтобы она была в нужном мне формате.

Элементы, оформленные как «Список», должны иметь свойство отображения, установленное на «list-item» в соответствии со спецификацией W3C CSS3. См. Этот ответ: stackoverflow.com/a/6257085/3191708

Недавно у меня была такая же проблема в Firefox 6.

Этот код css препятствовал отображению чисел:

Удаление «display: block» раскрыло их!

Похоже, что у Bootstrap есть стиль по умолчанию:

Вы должны переопределить это, чтобы удалить display: block и переместить позицию внутрь:

Выключи! В моем случае это была проблема.

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

Спасибо, человек. Очень признателен за этот ответ. Я добавляю неправильный тег в файл CSS, теперь работает нормально, ошибка из-за неправильных тегов css. Мой веб-сайт tentoread.com Если у вас все еще возникают какие-либо проблемы, вы можете проверить элемент и добавить этот код ниже. Я использую версию wordpress.

.entry ol ul li, .entry ol li

Семейство стилей должно быть в десятичной форме.

Если вы используете таблицу стилей сброса, вы можете включить нумерацию через css.

У меня была такая же проблема, оказывается, я просто не закрыл Надеюсь, это поможет кому-то другому!

У меня только что возникла эта проблема. Очень странно.

В противном случае все они будут показывать 0 в качестве своего числа.

Удаление отступов может исправить то, что числа не отображаются. Это сработало для меня в Chrome, не уверен, что это так же в других браузерах

В моем случае display: inline отменял отображение чисел. Возможно, при написании спецификации CSS было предположение, что никто не захочет нумеровать элементы в тексте, который выглядит как абзац. Но в тексте типа «юридический мелкий шрифт», который я использовал, такая нумерация была именно тем, что мне было нужно.

Решением было float: left на li

Поле padding-left необязательно, но уравновешивает пространство справа от числа.

Нашел решение с плавающей запятой здесь .

Я установил «overflow: hidden» в корневом html, что привело к исчезновению нумерации элементов списка. У меня тоже было «li» вложено в «ol». Сработала следующая настройка (я использовал sass):

немного смещены вправо. Это имитируется с помощью внутреннего заполнения, которое сбрасывается сбросом поля / заполнения.

задайте стиль padding: revert , который вернет отступ к исходному значению, как это предусмотрено для элементов
.

Убедитесь, что в li есть display: list-item;

Элементы списка действительно легко наследовать блок отображения откуда-то, что удалит числа или маркеры.

Источник