Search code examples
htmlcsslayout

Grouping of dl items

Say you have this definition list (the number of "sets" is not important, just that there are more than one).

<dl>
  <dt>Authors
  <dd>John
  <dd>Luke

  <dt>Editor
  <dd>Frank
</dl>

I'd like to have these definitions go horizontally. So that you'd get something like this:

Authors    Editor
John       Frank
Luke

And if you resized the browser so it was too narrow, it would wrap like this:

Authors
John
Luke

Editor
Frank

Is there a way to do this in a good way?

If I've understood correctly the only legal elements in a dl is the dt and dd items, so I can't wrap them in div elements or anything like that. I could split them up in separate dl lists, but that wouldn't really be correct either, as it really should be one list. Any ideas?

Solution

  • The specs allow for each group inside a dl to be wrapped inside a div element:

    In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.

    — https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

    Use this div to apply the necessary styling (e.g. flex).