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

Question

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

<ol>
<li>my text</li>
<li>my text</li>
<li>my text</li>
</ol>

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

1. мой текст
2. мой текст
3. мой текст

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

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

Спасибо всем

Answer 1

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

Answer 2

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

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

Answer 3

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

li {
  display: list-item;
  list-style-position: inside;
}

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Этот код CSS не позволяет отображать числа:

ol li {
  display:block;
}

Снятие «display: block» выявило их!

Answer 7

Bootstrap, кажется, имеет этот стиль по умолчанию:

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

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

ol {
    list-style-type: decimal;
    list-style-position: inside;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

Answer 8

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

.entry ol ul li, .entry ol li {
    list-style: decimal;
    font-family: initial;
    color: #000000;
}

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

Answer 9

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

Answer 10

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

Решение было с плавающей запятой: слева на li

ol {
    list-style-type: decimal;
}
ol li {
    display: list-item;
    list-style-position: inside;
    padding-left: 4px;
    float:left;
}

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

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