Definition List with Inline Pairs

Definition list with inline pairs

Try this:

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

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

How to style dt and dd so they are on the same line?

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Inline description list with hanging indent

You can consider negative margin that you rectify with a positive padding and you will get the same effect:

dl { padding-left:2em;}dt,dd {  display: inline;  margin:0;  padding:0;}dt { margin-left:-2em;}
dd:after {  content:"";  display:block;}dt {  font-weight: bold;}

<dl>  <dt>H:</dt>  <dd>Himenaeos</dd>  <dt>U:</dt>  <dd>Ullamcorper</dd>  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>  <dd>Vestibulum risus a tortor integer</dd>  <dt>Q:</dt>  <dd>Quisque</dd></dl>

How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

How about setting flex-wrap on the dl and have a width > 50% for dd
along with margin-left: auto?

See demo below:

dl {  display: flex;  flex-wrap: wrap;}dt {  width: 33%;}dd {  margin-left: auto;  width: 66%;}

<dl>  <dt>Authors</dt>  <dd>John Doe</dd>  <dd>Jane Doe</dd>  <dd>Max Mustermann</dd></dl>
<dl>  <dt>Publishers</dt>  <dd>John Doe</dd>  <dd>Jane Doe</dd>  <dd>Max Mustermann</dd></dl>

Is it correct to nest HTML definition lists (dl)?

Well the spec seems to allow it, provided that only the <dd> contains nested lists. The spec states that a <dt> is an inline element, so it can't contain a nested list. A <dd> is a block element, so an inner list inside one of these is fine.

Styling a Definition List (dl) with floating child elements

You can use display: inline to accomplish what you're looking for:

http://jsfiddle.net/unPdd/

Semantics and Structure of Name-Value Pairs

Thanks for this interesting question. There are few more things to consider here.

What is a pair? Two elements together. So we need a tag for this.
Let's say it is pair tag.

 <pair></pair>

The pair contains the key, and the corresponding value:

 <pair><key>keyname</key><value>value</value></pair>

Then, we need to list the pairs:

<pairlist>
     <pair><key>keyname</key><value>value</value></pair>
     <pair><key>keyname</key><value>value</value></pair>
</pairlist>

The next thing to consider, is the display of the pairs.
The usual layout is the tabular one:

key value
key value

and the optional separator, which is usually colon:

key : value
key : value

The colons can be easily added via CSS, but this certainly won't work in IE.

Case described above is the ideal one. But there is no valid HTML markup to fit in this easily.

---

To sum up:

dl is semantically closest, for simple cases of key and value, but is hard to apply visual styles
(eg. to display the pairs inline or to add red border to just hovered pair). The case which fits most for dl is glossary. But this is not the case we discuss.

The only alternative I can see in this case is to use table, like this:

<table summary="This are the key and value pairs">
    <caption>Some notes about semantics</caption>
    <thead class="aural if not needed">
        <tr><th scope="col">keys</th><th scope="col">values</th></tr>
    </thead>
    <tbody class="group1">  
        <tr><th scope="row">key1</th><td>value1</td></tr>
        <tr><th scope="row">key2</th><td>value2</td></tr>
    </tbody>
    <tbody class="group2">
        <tr><th scope="row">key3</th><td>value3</td></tr>
        <tr><th scope="row">key4</th><td>value4</td></tr>
    </tbody>
</table>

One more:

<ul>
  <li><strong>key</strong> value</li>
  <li><strong>key</strong> value</li>
</ul>

or:

<ul>
  <li><b>key</b> value</li>
  <li><b>key</b> value</li>
</ul>

or, when the keys may be linked:

<ul>
  <li><a href="/key1">key1</a> value</li>
  <li><a href="/key2">key1</a> value</li>
</ul>

The key and value pairs are usually stored in database, and those usually store tabular data,
so the table would fit best IMHO.

What do you think?

---

Related Topics