list-style-position: inside vs outside

Lining up lists as I want

[charles belov]

I'm having a problem getting ordered lists to style the way I'd like.

I want the bullet or number to be outside the list itself, which would imply use of

ul li, ol li {
list-style-position: outside;
}

which I believe is the default.

However, then the distance from the left edge is determined by where the text is, not where the bullet or number is. If I want the distance to be set by where the bullet or number (which might be Roman) is, then I have to choose:

ul li, ol li {
list-style-position: inside;
}

but then, the numbers become part of the list item text, and I don't want that either.

What I want is to align the left of the list based on the number or bullet, as in "list-style-position: inside" but align the list item text as in "list-style-position: outside".

I think I have the solution for bullets:

ul li {
list-style-position: inside;
text-indent: -1em;
margin-left: 1em;
}

but it does not work for numbered lists.

Here's what I have for numbered lists (list-style-position: outside is a default):

ol li {
margin-left: 2em;
}

but that only gives the desired result if there are 10 to 99 items in the list and I am using Arabic numerals.

Actually, it's not the desired result as the numerals are decimal-aligned and I'd like them left-aligned, so there is an even left edge.

Is this even possible?

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

The bullets/numerals are left-aligned if the position is set to

inside

, but right-aligned if set to

outside

.

You can always do something like this:

ol li {
list-style-position: inside;
text-indent: -2em;
margin-left: 4em;
}
ol li:first-letter {
margin-left: 1em;
}

But with the sometimes lacking support for text-indent and :first-letter I wonder if it's not better to just live with the right-aligned numerals. That is, after all, standard list format.