使列表标题<div>始终显示为<ol> list </ol> </div>

Question

任何人都可以帮我纠正这个问题：http://jsfiddle.net/ShgRr/以便div显示内容与ol一致吗？

主要问题是右侧跨度突破了div。

我确实考虑过将div作为项目，但这显然是非语义的。

我想知道的其他事情 - 在锚点上使用负边距是否正确所以它覆盖了li bullet并使整个链接可以点击？

由于

Answer 1

为什么要使用<div>？如果您将内容移动到具有该类名称的新<li>，您的CSS将会正常运行：http://jsfiddle.net/ShgRr/2/

我认为让<div>和<li>完全没问题。 <table>元素包含表头和表行，没有问题。

Answer 2

“在锚点上使用负边距是否正确，因此它覆盖了li bullet并使整个链接可以点击？”

如果您不希望它完全移除子弹更为正确。

如果你确实想要这些 - 我不倾向于让子弹本身可以点击 - 它们是一个非常小的目标，而不管它们是什么样的。比子弹更容易点击文本

Answer 3

你可以在你的CSS，html部分

中添加这个类

    div a  span > i
    {
        margin: 0 8px;
    }