Display DL like a table

Question

How to style definition list items to have each definition in one line?

HTML:

<dl>
    <dt>word</dt><dd>meaning</dd>
    <dt>word</dt><dd>meaning</dd>
    <dt>word</dt><dd>meaning</dd>
</dl>

Visual rendering I need:

*word* meaning
*word* meaning
*word* meaning

Solution

Try this.

dt  {
    clear:left;
    float:left;
    font-size:12px;
    line-height:26px;
    width:70px;
}

dd {
    clear:right;
    font-size:12px;
    line-height:18px;
    padding:4px 0 4px 40px;
}

Comments

[takeshin]

Thanks, this works in my Firefox (haven't tested other).

[jpeltoniemi]

Unfortunately this wouldn't scale with content like table does