Full width horizontal rule in an ordered list

In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of t开发者_StackOverflow社区he floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?

You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).

Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/

[EDIT]

Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/

[EDIT2]

Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/

[EDIT3]

OK, here's another one... http://jsfiddle.net/J4b6Y/39/

UPDATE 4

Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.

http://jsfiddle.net/J4b6Y/122/

UPDATE 3

Now what about this

http://jsfiddle.net/J4b6Y/105/

UPDATE 2

http://jsfiddle.net/J4b6Y/48/

UPDATE

Try this if it works for you

http://jsfiddle.net/J4b6Y/33/

I would suggest that you remove the hr tag and the floating image properties.

If you cannot set the image with css background, you can do the following:

HTML

<li>
    <img src="" alt="test"/>
    <p>Test</p>
</li>

CSS

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

Also, if you can remove the p tag, you will save few bites.

From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.

I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.