Forum How do I...?

Alignment of bullets of a numbered list

rologica
How can I align the numbers of an ordered list to the left?

Normally the alignment is like this:

 1
 2
 .
 .
 .
10
11
12

And I want to align it like this:
1
2
.
.
.
10
11
12


I hope someone can help me! I've got the feeling it's a real noob question

Thanks,
Rogier :oops:
mikeday
You can use the ::marker pseudo-element. If you look in the default xhtml.css file in the Prince installation you will find this rule:
li::marker {
    padding-right: 8pt;
    text-align: right
}

Try overriding it by adding a rule to your own style sheet or document:
li::marker { text-align: left }
rologica
I've tried the following:
- li::marker{text-align:left}
- li::marker{text-align:left !important}
I have even changed the rule in the default xhtml.css to text-align:left.

but all to no avail, it keeps right aligned. :x

There is no other align rule in my stylesheet, is there something else that could overrule this alignment?
mikeday
Oops, I forgot that you will also need to specify a width for the marker, otherwise it will only be as big as necessary, so the alignment will have no effect.

Try making a list, and add this rule to see the sizes of the boxes:
li, li::marker { border: solid red thin }

List elements <ul> and <ol> have a 40pt left margin, and we can make the marker big enough to fill this margin like this:
li::marker { width: 40pt; padding: 0 }

Now you should see that the marker box is bigger than its content, and the content can be aligned within the box using the text-align property.
rologica
Thanks so much...

The width setting did the trick!