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-reset样式表，可能已删除list-style-type，或margin已设置为0 }。尝试：

ol {
    margin-left: 2em;
}

ol li {
    list-style-type: decimal-leading-zero;
    list-style-position: outside;
}

JS Fiddle demo

值得注意的是，@Fredrik does in his answer display属性可能会导致问题。对于list-elements，默认值为：

display: list-item;

Answer 2

尝试删除display: block;，以便您的css改为：

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