OL缺少数字

时间:2011-06-06 19:09:27

标签: html xhtml

这看起来像是一个愚蠢的问题而且是基本的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;
}

2 个答案:

答案 0 :(得分:7)

如果您使用任何类型的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;

答案 1 :(得分:4)

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

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