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

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

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

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

  •     
  • мой текст    
  • мой текст    
  • мой текст    

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

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

Спасибо всем

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 5

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

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

Ответ 6

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

Этот код css помешал показаниям чисел:

ol li {
  display:block;
}

Удаление "display: block" выявило их!

Ответ 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;
}

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

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;
}

Ответ 8

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

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

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

Ответ 9

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

Ответ 10

У меня была эта проблема. Очень странно.

Если отключить:

ol li {overflow: hidden;}

цифры появляются.

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

Ответ 11

Возможно, в ответе может быть и другое:

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