Question

我的页面上有一个有序列表（ol），但编号根本没有出现！我这样做了：

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

正如我输入的那样，stackoverflow能够以我想要的方式正确呈现它，如下所示：

我的文字

我的文字

我的文字

但是，我的网页上没有发生这种情况。我在我的localhost上的Firefox中查看了这个。

如果有人知道为什么我的ol看起来像是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

在CSS中为list-style-type: decimal;尝试ol。

Here's您可以使用更多值。

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

如果您使用：

*{
padding: 0;
}

将其关闭！就我而言，这是个问题。

Answer 9

谢谢man真的很感谢这个答案我在CSS文件中添加了错误的标签，现在因错误的css标签而工作正常错误。我的网站tendtoread.com如果您仍然遇到任何问题，可以检查元素并在下面添加此代码。我使用wordpress版本。

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

样式系列必须是十进制形式。

Answer 10

我刚才有同样的问题，事实证明我根本没有关闭<div>希望这有助于其他人！

Answer 11

我刚刚遇到这个问题。很奇怪。

如果我禁用：

ol li {overflow: hidden;}

弹出数字。

否则他们都会显示0作为他们的号码。

Answer 12

可能还有另一种可能的答案：

删除填充可以修复未显示的数字。这对我在Chrome中有用，不确定它在其他浏览器中是否相同

Answer 13

在我的情况下， display：inline 覆盖了数字的显示。编写CSS规范时，可能有一个假设，就是没人想给像段落一样流动的文本中的项目编号。但是在“合法的精美印刷”文本中，我正在对这种编号进行样式设置，这正是我所需要的。

解决方法是在 li

上 float：left

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

padding-left是可选的，但可以抵消数字右边的空间。

找到了浮动解决方案here。

Answer 14

我在根html中设置了“溢出：隐藏”，这导致列表项编号消失。我也将“ li”嵌套在“ ol”中。以下设置有效（我正在使用sass）：

ol {
    overflow: visible;
}
    li {
        overflow: visible;
    }
}

Answer 15

如果您使用的是重置样式表，则可以通过CSS启用编号。

ol li {
    list-style: decimal;
    list-style-position: inside;
}

Answer 16

重新设置边距/填充也可能导致数字不显示。 $RecipientType = (Get-Recipient $Identity | Select-Object -ExpandProperty RecipientType) if ($RecipientType.Equals("UserMailbox")) { Write-Host "Mailbox is OnPrem" }中的<li>元素向右缩进一点。这是通过本地填充来模仿的，通过边距/填充重置来重置。

在<ol>元素上，赋予<ol>样式，该样式将把填充恢复为原始值，如针对padding: revert元素的预期。

订购清单（ol）显示未编号？

16 个答案: