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小提琴演示

值得注意的是,正如@Fredrik 在他的回答中所做的那样,该display属性可能会导致问题.对于list-elements默认的是:

display: list-item;

Answer 2

尝试删除，display: block;以便你的 css 变成这样：

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