Thursday, 18 September 2008

Styling a Defintion List with CSS to show on one line

HTML definition lists seem to be often misused - if at all. They're not that well know - and by default the don't look right for many situations.

Term 1
Definition then follows

Term 2
Definition then follows

If the terms and definitions are short, there isn't really a need for 2 lines and an indent - here is my solution for a one line render.

dt, dd{
margin:0px;padding:0px;
}

dt {
width:70px;
float:left;
}


Looks something like this

Term 1
Definition then follows

Term 2
Definition then follows

much better!

No comments: