这看起来像是一个愚蠢的问题而且是基本的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;
}
答案 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;
}
值得注意的是,@Fredrik does in his answer display
属性可能会导致问题。对于list-elements
,默认值为:
display: list-item;
答案 1 :(得分:4)
尝试删除display: block;
,以便您的css改为:
li.top5rankings {
color: red;
text-align: center;
}