有序列表（ol）出现无编号？

Question

我在网页上有一个有序列表（ol），但是编号根本没有显示出来！ 我已经这样做了：

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

我刚才输入的内容在stackoverflow上能够正确地呈现出来，就像这样：

1. 我的文本
2. 我的文本
3. 我的文本

然而，在我的网页上并没有发生这种情况。我在本地主机上使用Firefox查看。

如果有人知道为什么我的ol看起来像ul（即没有编号），我将非常感激帮助。如果不行，请告诉我如何使用ul实现有编号的列表。

谢谢大家

- Abs

Answer 1

这将是一个CSS问题。CSS可以改变编号/项目符号的样式，甚至完全关闭它。使用Firebug，检查元素并查看右侧的CSS样式以查看应用的样式。寻找名为list-style的样式。

- nickf

---

我已经使用Firebug查看它继承的任何属性，但它们都不会影响ol！我特别查找了list-style，但是没有发现！:( - Abs

啊，我找到了。我只是在寻找有关ol/ul的样式，而不是li本身！谢谢nickf！ - Abs

li 应该设置为 display: list-item;。 - codycustard

Answer 2

尽管可能是list-style-type的问题，特别是如果您使用了重置样式表，但您也可以确保列表的margin-left/padding-left足够大，以便数字能够适合其中。

此外，值得一提的是，可以添加list-style-position: inside;来查看浏览器是否正在生成/应用数字。

- David Thomas

---

干得好！我花了一段时间来琢磨这个问题。没有足够的填充。 - codemonkey

Answer 3

非常奇怪的情况，我的ol和ul的数字和符号在Adobe Dreamweaver CS6中显示，但在任何浏览器中都没有显示。该网站被包裹在一个具有整个网站的display:block属性的标签中。我不得不输入以下CSS才能使数字和符号显示。

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

- Huffdaddy

---

这个方法可以显示数字，但是会破坏 inline-block 的效果，使用 float: left; 可以同时实现两种效果。 - Serj Sagan

Answer 4

在你的CSS中尝试使用list-style-type: decimal;来设置有序列表ol的样式。

这里还有更多可用的值。

- roflwaffle

Answer 5

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

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

- pathilink

Answer 6

好的，我曾遇到同样的问题，解决方法是在LI定义中设置"display: list-item;"。这个设置可能在其他地方被覆盖成"display: block;"。

我还将列表标记的位置从内部更改为外部，以使其符合我的格式要求。

- Danconia

---

按照W3C CSS3规范，样式为“List”的项需要将它们的display属性设置为“list-item”。请参考此答案：https://dev59.com/HW025IYBdhLWcg3wChOb#6257085 - pistol-pete

Answer 7

最近我在Firefox 6中遇到了同样的问题。

这段CSS代码阻止了数字的显示：

ol li {
  display:block;
}

去掉"display:block"后它们就出现了！

- Friend

Answer 8

确保li的display: list-item;

很容易从其他地方继承display:block;，这将删除数字或符号标记。

- codycustard

Answer 9

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

- Magsafe

Answer 10

如果你使用：

*{
padding: 0;
}

关闭它！在我的情况下，这是一个问题。

- adam

---

谢谢，这对我很有帮助。因为我一直在苦苦寻找问题所在，最终发现是将其设置为全局样式。 - Ahmed HABBACHI