homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

style an ordered list
2.1 - 2.2 - 2.3 etc
Purple Martin

 5:07 am on Feb 20, 2008 (gmt 0)

Is it possible to style an ordered list so that it looks like this?

2.1 Banana
2.2 Apple
2.3 Strawberry



 7:39 am on Feb 20, 2008 (gmt 0)

In a way; it is done by nesting <ol> sections and then using CSS to style the nested ones.

You end up with:
... 1.
... 2.
... 1.
... 2.
... 3.

In CSS terms:
ol {margin-left:0}
ol ol {margin-left:30px}
ol ol ol {margin-left:60px}

Purple Martin

 11:01 pm on Feb 20, 2008 (gmt 0)

Thanks, your idea has helped me come up with the following which is close enough (I had been hoping for some kind of pseudo-element li:before thingy but that just doesn't do what I wanted).

ol, li {
font-size: 16px;
font-family: Times New Roman;
li li {
position: relative;
top: -19px;
left: -29px;


Yes I know that fixed pixel sizes are not good for accessability, but I can get away with it in this case because it's for an internal memo thingy only. And using fixed pixel sizes and a fixed font keeps evertyhing lined up perfectly.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved