Html 有序列表中的全宽水平规则

在中，您可以看到水平规则并没有完全穿过（在数字下）。我想要它。我试过使用

列表样式position:inside，但这意味着我无法强制数字显示在正确的位置（因为浮动的左图）。有没有一种优雅的方法可以使用CSS实现这一点，或者我必须自己生成编号，然后适当地设置样式？
更新4

似乎更新3在webkit上运行得很好，但不是FF。。。所以是时候使用真正的CSS功能了



更新3

那么这个呢



更新2



更新

如果对你有用，试试这个

您似乎很清楚
列表样式位置
属性，因此您应该知道为什么横线不会一直延伸到项目符号/编号下。列表左侧有一个填充，将列表元素推到右侧。它们的内容不会超出其空间：）

以下是我如何克服这个问题的：

[编辑]

webkit浏览器的修复程序：

[编辑二]

适用于所有浏览器，并具有有效的HTML o_o

[编辑部3]

好的，这是另一个
 我建议您删除hr标记和浮动图像属性

如果无法使用css背景设置图像，可以执行以下操作：

HTML

另外，如果你可以删除p标签，你将节省一些信息。
从这个问题的其他答案来看，似乎有一些方法可以通过CSS实现这一点，但没有一种优雅的方法。因此，我更喜欢的解决方案是在HTML中生成相应的编号和样式。如果页面是由服务器端脚本生成的，那么这样做很简单

我会留意用CSS解决这个问题的更优雅的方法，如果我发现任何问题，我会更新这个问题。
不同的浏览器可能会有所不同。你在用什么？我应该澄清一下，我需要
float:left。这里有一个更类似于我的实际问题。我认为OP使用的是Firefox。水平规则仍然没有出现在列表项目编号下，因此它无法解决OP的问题。希望更新4可以成为您的答案。它在IE8中似乎不起作用，而且似乎有点过于复杂。。。我想最好是自己生成编号并适当地使用样式。。。它将更加简单，并且支持跨浏览器。想法？您只能对IE使用条件注释，这样IE将使用之前建议的方法之一，而使用此方法，您将很好地使用其他浏览器。选择取决于你，我个人宁愿少用html，多用CSS，即使很复杂。毕竟，这很复杂，可能是因为你不习惯，但我可以向你保证，这真的不难。在WebKit浏览器中尝试你的演示：（谢谢，@thirtydot。我更新了回复以包含一个固定版本。它现在可以工作，但你的。不幸的是，我确实需要将该图像向左浮动。在实际问题中（而不是我举的例子），它是另一个div左边的一个div float。@mingos，3 edit与我刚得出的结论相同。我宁愿使用hr标记，而不是底部边框，因为我觉得它在语义上更正确。此外，我需要浮动图像。我的实际情况比我的示例稍微复杂一些，需要浮动该图像（实际上，它是一个div，漂浮在另一个div的左侧）。然后你应该给我们真正的代码，而不是几乎相似的东西，因为每种情况都不同，可能需要不同的方法。对不起，这里有一个更接近实际情况的代码。如果你愿意，你可以拥有实际的代码，但它非常庞大。我想如果我给出一个简单的公关示例，人们会更容易理解问题。
<li>
    <img src="" alt="test"/>
    <p>Test</p>
</li>

li{
    border-bottom:1px solid black;
    list-style-position:inside;
}
li p{
     display:inline-block;   
}