Search code examples
csslistlineinlinedefinition

Definition list with inline pairs

I'm trying to create a definition list of term-definition pairs, each pair existing on a single, separate line. I've tried making dts and dds display:inline, but then I lose the line breaks between the pairs. How do I make sure I have a line for each pair (and not for each individual term/definition)?

Example:

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

yielding:

Term 1 Def 1
Term 2 Def 2

The CSS for making them inline would be:

dt,dd{display:inline;}

yielding:

Term 1 Def 1 Term 2 Def 2

...which is not what I want (line breaks between pairs missing).

Solution

  • Try this:

    dt, dd { float: left }
dt { clear:both }

    Add margin-bottom to dt dd if you'd like more space between them..