Wednesday

Nested List Styling

Oddly enough, I had a hard time finding a good set of default list styles that would work in a myriad of cases. For example, what if I had a nested ordered list, or an ordered list under an unordered list, or vice-versa? Well, here we go. I'm sure there's some weird cases I've missed, but this gets us a nice amount of flexibility and predictable behavior.

The entirety of my css for my lists is below. Pretty concise, and covers mostly every case I've needed.

ul {
    list-style: none;
}

ul.bullets,
ul.bullets ul {
    list-style: disc inside;
}

ul, ol, dl {
    margin-left: 2.5em;
}

ul ul {
    margin-bottom: 0;
}

ol {
    list-style: decimal outside;
}

ol ol {
    list-style: lower-alpha outside;
}

ol ol ol {
    list-style: lower-roman outside;
}
​

Results

See the Demo for the full code including HTML markup, but our end result will look like so:

No comments:

Post a Comment