Why can I not use display:table-row with list-style-type:decimal?
css, html
Solution
Because `list-style-type` only works with `display:list-item`. :/
Per the specification:
`list-style-type` Applies to: elements with `display: list-item`
Edit Based on new information in your comments, you can do this on modern browsers: 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;
}
Or what about this: http://jsfiddle.net/XMrbu/14/
ol {
display:inline-block;
list-style-type:decimal;
background:rgba(255,0,0,0.2);
}
If you make the `ol` be `display:inline-block` (or `float` it) it will automatically collapse to the width of the longest item inside. You can then style the `ol` or `li` as you like to that width.
Problem
Why I cannot use `display:table-row;` with `list-style-type:decimal;` ? my CSS file: ``` ol { list-style-type: decimal; } li { background-color: red; display: table-row; } ``` my HTML file: ``` <ol> <li>This is the first.</li> <li>This is the second.</li> </ol> ``` JSFiddle Goal: I just want to display the numbers leading each line, with all `<li>` as long as the longest item.