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

See http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line/24520786#24520786 — Justin, Jul 01 '14 at 23:43
Answered in the 'duplicate' question - comparising
to http://stackoverflow.com/a/32727905/4258817 — Mousey, Sep 22 '15 at 22:22

gearsdigital · Answer 1 · 2010-07-19T20:09:20.033

8

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;
}

edited Jul 19 '10 at 20:09

answered Jul 19 '10 at 20:04

gearsdigital

13,915
6
44
73

1

Thanks, this works in my Firefox (haven't tested other). – takeshin Jul 19 '10 at 20:23
6

Unfortunately this wouldn't scale with content like table does – jpeltoniemi Jul 27 '15 at 16:06

Display DL like a table

1 Answers1

Linked