Styling ordered lists

Here’s a very simple ordered list with a red border; its individual list items have a black border with a 1-pixel margin to make things a bit clearer. Note that the list numbers are contained directly within the ol element, not within the lis themselves.

  1. one
  2. two

Messing about with padding and margins doesn’t help:

  1. one
  2. two

This isn’t much of an issue until you’re asked to markup something that looks like:

1. Step one 2. Step two

Note: effect marked-up using span elements, not a real list

Solutions?

Use list-style-position: inside

  1. one
  2. two

Compare the borders and number placement with that of example 1.

Now the counter lives inside the li, and the required effect can be achieved:

  1. Step one
  2. Step two

Tweet

Comments

Wed 5 Aug 2009 19:29

Jack

Jack said:

Thank You so Much! I had the problem of not being able to underline the numbers in the ordered list and this solved it:

list-style-position: inside;

This is something all the web design experts couldn’t tell me. Phew.

Leave a comment