如何在内联有序列表中显示数字？

Question

我有一个清单..

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

它显示十进制数字很好,但是当我设置<li>为内联或内联块时,数字会消失!我在网上看到其他地方提到我必须确保我有足够的边距和填充......我确信我做了(每个10 px!)还有其他原因这些数字可能会消失吗？我从萤火虫那里得知,一旦我取消选中'内联',他们就会回来......

css是

ol{
padding: 20px; 
list-style-type:decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}

Answer 1

我不知道为什么会发生这种情况,但可以通过左移而不是来解决 display: inline

见https://jsfiddle.net/CMKzK/

ol {
    padding: 20px; 
    list-style-type: decimal;

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}

Answer 2

你可以试试这个:

ol
{
  /* List will start at 25 + 1 = 26 */
  /* Remove the 25 if you want to start at 1 */
  counter-reset: LIST-ITEMS 25;
}

li
{
  display: inline;
  padding-right: 0.5em;
}

li:before
{
  content: counter( LIST-ITEMS ) ".";
  counter-increment: LIST-ITEMS;
  padding-right: 0.25em;
  font-style: italic;
  font-weight: bold;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
  <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
  <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
  <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
  <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
  <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>

Answer 3

如果您不关心旧版本的IE,可以使用自动计数器和编号

否则你应该手动指定数字(@Babiker的解决方案),或者float你li的(@Eric Fortis'解决方案).