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 { 
    list-style-position: inside; 
    list-style-type: decimal; 
} 

繼承

Answer 1

嘗試刪除display: block;讓你的CSS變成這樣，而不是：

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

Answer 2

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