Get multiline text to align with content instead of numeric label with OL and list-style-type: inside

Question

Hi!

I have an OL element with list-style-position: inside. However, if the text inside an LI element is multiline, the text on the next line flushes left with the numbering, not with the other text.

Is there any way of fixing this?

Code used:

<style type="text/css">
ol { list-style-position: inside; }
</style>

<ol>
<li>If this text passes to the next line, it's not aligned with the content but with
the numeric label.
</ol>

Thanks for your help :)

Answer 1

You can do this with a negative right margin.

ol {
    list-style-position: outside;
    margin-right: -20px
}

This should make the list markers appear inside the list, with multiline text always indented.

Answer 2

list-style-position: outside;

If I understand well...

Answer 3

Well, simply remove list-style-position: inside; (:
What you need is list-style-position: outside; which is the default value.
If you really need list-style-position: inside; you can try setting padding and text-indent to the ol element: http://jsfiddle.net/KXdjZ/4/