OL缺少数字

Question

这似乎是一个愚蠢的问题，而且是基本的html，但我无论如何都会问它。我看到一些帖子提出了类似的问题，但这无助于解决我的问题。我正在关闭本地服务器进行测试。我的语法是这样的。

<div id="top5">
            <img src="images/top5.png" alt="Top 5 Rankings" />
            <ol>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
                <li class="top5rankings"><a href="roster/kidwonder.php">Kid Wonder</a></li>
            </ol>
        </div>

然而，它并没有列出订单的编号，只是看看是否有人能看到我的问题。这是我在css中应用于渲染页面的内容：

li.top5rankings {
color: red;
display: block;
text-align: center;
}

styles.css（103行）

* {
    margin: 0;
    padding: 0;
    }

styles.css（第4行）继承自ol

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

Answer 1

如果使用任何类型的css重置样式表，很可能list-style-type已被删除，或者margin已设置为0。尝试：

ol {
    margin-left: 2em;
}
ol li {
    list-style-type: decimal-leading-zero;
    list-style-position: outside;
}

JS Fiddle演示

同样值得注意的是，正如@Fredrik在他的回答中所做的那样，display属性可能会引起问题。对于list-elements，默认值为：

display: list-item;

Answer 2

试着删除display: block;，这样你的css就会变成这样：

li.top5rankings {
  color: red;
  text-align: center;
}