Definition list with inline pairs

user_1484997 0
Viewed 21996

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).

definition inline line list css
8 Answers

I wanted to be able to create a list with inline pairs, centrally aligned. Using dt:before { display; block} worked well for this, but when copying text from a browser, pseudo elements are ignored so would end up being pasted like this:

Term 1: Def 1Term 2: Def 2

This is a minor issue, but there's another approach documented at MDN:

WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

The following solution works well for this:

dt, dd {
  display: inline;
}

<dl>
  <div><dt>Term 1:</dt> <dd>Def 1</dd></div>
  <div><dt>Term 2:</dt> <dd>Def 2</dd></div>
</dl>
user_2830780
Related