How to make <dl> layout horizontally?

问题

I'm trying to develop a layout for my website in which elements of a definition list will be laid out horizontally, kind of like this:

term 1                term 2               term 3
definition 1          definition 2         definition 3

Anyone know a way to make a definition list look like this using valid CSS? Or if I can't do it with a <dl>, what would be the recommended structure?

回答1:

This should do it:

<dl>
    <dt>term 1</dt>
    <dd>definition 1</dd>
</dl>
<dl>
    <dt>term 2</dt>
    <dd>definition 2</dd>
</dl>
<dl>
    <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

And in CSS:

dl {
    float: left;
}

dl dd {
    display: block;
    margin: 0;
}

Apply other styling as necessary. A working example can be found here:

http://www.ulmanen.fi/stuff/dl.php

回答2:

Zombie question resurrection but the accepted answer totally breaks the whole reason for using a dl in the first place. There's a better way.

From the HTML specification for DLs (emphasis mine):

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.

Of course, easily solved by flexbox.

dl {
  display: flex;
  justify-content: space-between;
}

/* Below is just styling. Adjust as needed. */
dt {
 font-weight: bold;
}
dt,
dd {
  margin: 0;
  padding: 0;
}
/* Small screens */
@media screen and (max-width: 400px) {
  dl {
     flex-direction: column;
  }
  dl div {
    padding: 1em 1em 0 1em;
  }
}

<dl>
  <div>
    <dt>term 1</dt>
    <dd>definition 1</dd>
  </div>
  <div>
    <dt>term 2</dt>
    <dd>definition 2</dd>
    <dd>definition 2.1</dd>
    <dd>definition 2.2</dd>
  </div>
  <div>
    <dt>term 3</dt>
    <dd>definition 3</dd>
  </div>
  <div>
    <dt>term 4</dt>
    <dd>definition 4</dd>
  </div>
</dl>

来源：https://stackoverflow.com/questions/2485001/how-to-make-dl-layout-horizontally