krainert krainert - 5 months ago 18
CSS Question

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

dt
s and
dd
s
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).

Answer

Try this:

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

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