为什么我不能使用display：table-row with list-style-type：decimal？

Question

为什么我不能使用display:table-row; with list-style-type:decimal; ？

我的CSS文件：

ol {
    list-style-type: decimal;
}

li {
    background-color: red;
    display: table-row;
}

我的HTML文件：

<ol>
    <li>This is the first.</li>
    <li>This is the second.</li>
</ol>

的jsfiddle

目标：我只想显示每行的数字，所有<li>只要是最长的项目。

Answer 1

因为list-style-type仅适用于display:list-item 。 ：/

根据规格 ：

list-style-type
适用于：带有display: list-item元素

---

编辑根据评论中的新信息，您可以在现代浏览器上执行此操作：
http://jsfiddle.net/XMrbu/12/

ol {
   list-style-type:none;        
   counter-reset: sectioncounter;
}                      
li { display:table-row }
li:before {
   content: counter(sectioncounter) ":";
   counter-increment: sectioncounter;
   display:inline-block; width:2em; text-align:right;
   position:relative; left:-2.5em; margin-right:-2em;
}​

或者这个：
http://jsfiddle.net/XMrbu/14/

ol {
   display:inline-block;
   list-style-type:decimal;
   background:rgba(255,0,0,0.2);
}                      

如果你要display:inline-block ol display:inline-block （或float它）它会自动折叠到里面最长项目的宽度。 然后，您可以根据自己的喜好将ol或li设置为该宽度。