模拟列表

Question

将div变为有序列表的正确方法是什么？

假设您有此HTML

<div id="list">
    <span>List item one</span>
    <span>List item two</span>
    <span>List item three</span>    
</div>

我的印象是你不需要做任何事情，除了这个

#list {list-style:decimal; margin:1em 0 1em 2.5em;}
#list span {display:list-item}

让它发挥作用。实际上，除了Mozilla之外，所有浏览器中 都可以正常工作。见fiddle。 Mozilla不计算：所有列表项都有数字0。

那么我错过了一些重要的CSS吗？我确实尝试将列表样式放在跨度上，或者仅在跨度上而不是div上，但这没有任何效果。

这是Gecko中的错误吗？或者这甚至不应该起作用，并且其他浏览器是否采用标准自由？互联网搜索令人沮丧，因为结果都是将样式应用于ol和ul元素。

Answer 1

#list {list-style:decimal; margin:1em 0 1em 2.5em;counter-reset: section;}
#list span:before{counter-increment: section; content: counter(section) ".";}

.... 仅适用于css3 - 包括FF。