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