Html 有序列表 (ol) 显示未编号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2642067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ordered List (ol) showing up un-numbered?
提问by Abs
I have an ordered list (ol) on my page but the numbering is not showing up at all! I have done this:
我的页面上有一个有序列表 (ol)，但编号根本没有显示！我已经这样做了：
<ol>
<li>my text</li>
<li>my text</li>
<li>my text</li>
</ol>
As I have typed the above, stackoverflow was able to render it correctly the way I wanted it to, like so:
正如我在上面输入的那样，stackoverflow 能够按照我想要的方式正确渲染它，如下所示：
- my text
- my text
- my text
- 我的文字
- 我的文字
- 我的文字
However, this is not happening on my webpage. I am viewing this in Firefox on my localhost.
但是，这不会发生在我的网页上。我正在本地主机上的 Firefox 中查看此内容。
If any knows why my ol's look like ul's (i.e. no numbering) I would be grateful for help. If not, please let me know how I can achieve a numbered list using ul's.
如果有人知道为什么我的 ol 看起来像 ul（即没有编号），我将不胜感激。如果没有，请告诉我如何使用 ul 获得编号列表。
Thanks all
谢谢大家
回答by nickf
It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style.
这将是一个CSS问题。CSS 可以更改编号/项目符号样式，甚至可以将其完全关闭。使用 Firebug，检查元素并查看右侧的 CSS 样式以查看应用了哪些样式。寻找一个叫list-style.
回答by David says reinstate Monica
While the list-style-typeis most likely the problem, especially if you've used a reset stylesheet, you might also make sure that the margin-left/padding-leftof the list is large enough that the numbers can fit into the space.
虽然这list-style-type很可能是问题所在，特别是如果您使用了重置样式表，您还可以确保列表的margin-left/padding-left足够大，以便数字可以放入空格中。
Also, it might be worth adding list-style-position: inside;just to see if the numbers are being generated/applied by the browser.
此外，可能值得添加list-style-position: inside;只是为了查看浏览器是否正在生成/应用数字。
回答by Huffdaddy
Very weird situation, the numbers and bullets for my oland uldisplay in Adobe Dreamweaver CS6. They did not display in any type of browser. The website is wrapped with a that has a display:block for the entire website. I had to enter the below CSS to get the numbers and bullets to display.
非常奇怪的情况，我的ol和ul显示在 Adobe Dreamweaver CS6 中的数字和项目符号。它们没有显示在任何类型的浏览器中。该网站用一个 display:block 来包装整个网站。我必须输入以下 CSS 才能显示数字和项目符号。
li {
display: list-item;
list-style-position: inside;
}
回答by roflwaffle
回答by Danconia
Ok, I had the same problem and all I did is set in the LI definition 'display: list-item;'. This had been overriden to 'display: block;' elsewhere.
好的，我遇到了同样的问题，我所做的只是在 LI 定义“display: list-item;”中设置。这已被覆盖为“显示：块；” 别处。
I also changed list-style-position from inside to outside so that it'd be in the format I wanted.
我还将 list-style-position 从内到外更改为我想要的格式。
回答by Friend
Recently I had the same issue in Firefox 6.
最近我在 Firefox 6 中遇到了同样的问题。
This css code prevented the numbers from showing up:
此 css 代码阻止了数字显示：
ol li {
display:block;
}
Removing "display:block" revealed them!
删除“显示：块”揭示了它们！
回答by Mo Bitar
Bootstrap seems to have this default style:
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;
}
You should override this to remove display: block and move the position to inside:
您应该覆盖它以删除 display: 阻止并将位置移动到内部：
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;
}
回答by Alok Kumar
Thanks man Really appreciate for this answer I add wrong tag in CSS file, now working fine error due to wrong css tags. My Website tendtoread.comIf you still face any problem you can inspect element and add this code below. I m using wordpress version.
谢谢男人 非常感谢这个答案 我在 CSS 文件中添加了错误的标签，现在由于错误的 css 标签而工作正常。我的网站tendtoread.com如果您仍然遇到任何问题，您可以检查元素并在下面添加此代码。我正在使用 wordpress 版本。
.entry ol ul li, .entry ol li {
list-style: decimal;
font-family: initial;
color: #000000;
}
Style family must be in decimal form.
样式族必须是十进制形式。
回答by adam
If you use:
如果您使用：
*{
padding: 0;
}
Turn it off! In my case it was a problem.
把它关掉！就我而言，这是一个问题。
回答by Coz
I just had the same issue, turns out I simply hadn't closed a <div>Hope this helps someone else!
我刚刚遇到了同样的问题，结果我根本没有关闭<div>希望这对其他人有帮助！
