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

样式.css(第 103 行)

* {
    margin: 0;
    padding: 0;
    }

styles.css (line 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 默认是:

显示:列表项；