ansaurus

Question

Right-align legal-styled numbers and left-align text in ordered lists using CSS

Answer 1

A:

Specifying list-style-position: outside and a proper padding on the li elements should do it.

You 2010-08-11 17:08:37

Thanks, but that didn't work. See the full document I added.

Michael Prescott 2010-08-11 17:26:58

Answer 2

A:

A slightly awkward solution might be:

ol {
    width: 10em;
    counter-reset: item;
    list-style-position: outside;
}

li {
    position: relative;
    left: 2em;
    display: block;
    list-style-position: outside;
}

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
}

li li:before {
    left: -2.5em;
}

li li li:before {
    left: -3em;
}

This just uses position: relative; to allow the li text to be moved to the right (left: 2em;) while positioning the li:before text absolutely and moving it to the left.

The awkward part comes from having to specify different left: values for the li:before, li li:beforeandli li li:before` so it's not quite as simple as it might be.

There's a demo of what I came up with over at: http://jsbin.com/asaru3

Edited in response to comments from OP:

Thanks, I believe I understand how that works. To continue the pattern, I'd have to create "li li li li" for a list that was 4 levels deep, right? Also, I don't see that the numbers are left-aligned. Is there a way to get at those value and apply similar repositioning or alignment to just them?

I mean the numbers are NOT right-aligned.

To the first question 'to continue the pattern, I'd have to create "li li li [li:before]" for a list...4 levels deep?" Yeah, which is one of the reasons I think it's an awkward solution. Albeit it does work.

To address the latter question, I believe that you want the numbers to align along their right edge?

If you revise the css for li:before:

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
    display: block;
    width: 2em; /* to give the same dimensions to all counter 'blocks' */
    text-align: right; /* does exactly what you'd think =) */
}

With this approach bear in mind that the size of the contents of li:before must be less than the left: positioning of the li, otherwise there'll be overlap of the counter and the content.

Be aware that as the counter grows in size its width should also be amended for li li:before, li li li:before as before.

Demo at: http://jsbin.com/ovuru3

David Thomas 2010-08-11 17:58:53

Thanks, I believe I understand how that works. To continue the pattern, I'd have to create "li li li li" for a list that was 4 levels deep, right? Also, I don't see that the numbers are left-aligned. Is there a way to get at those value and apply similar repositioning or alignment to just them?

Michael Prescott 2010-08-11 18:32:27

I mean the numbers are NOT right-aligned.

Michael Prescott 2010-08-11 18:42:35

Thanks again. I've just purchased a highly recommended book about CSS and have a handful of good resources, but nothing beats having a professional provide a good example.

Michael Prescott 2010-08-12 18:53:51

...or enthusiastic amateur in this case, but thank you! And you are, certainly, welcome =)

David Thomas 2010-08-12 21:19:30

ansaurus

tags:

views:

answers:

Right-align legal-styled numbers and left-align text in ordered lists using CSS

related questions