Numbered lists with numbers flush left

November 28th, 2006

As a rule, I don't like the indentation of numbers and bullets in a list, which seems to come as standard behaviour in most applications, including Web browsers.

If you want:

1. First item.

2. Second item.

instead of:

   1. First item.

   2. Second item.

you can use the following CSS.

ol, ol li {
   margin: 0;
   padding: 0;
   list-style-position: inside;
}

Note: Make sure you don't use quote marks around the numbers, or Firefox will ignore the style. I started out with margin: "0em"; and it took me a while to figure out what I was doing wrong!

Leave a comment