4

为什么我不能使用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>与最长的项目一样长。

4

1 回答 1

4

因为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);
}                      

如果您制作olbe display:inline-block(或float它),它将自动折叠到内部最长项目的宽度。然后,您可以按您喜欢的宽度设置olor的样式。li

于 2012-04-12T18:10:41.553 回答