Как сделать <dl>макет по горизонтали?

Question

Я пытаюсь разработать макет для своего веб-сайта, в котором элементы списка определений будут расположены горизонтально, примерно так:

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

Кто-нибудь знает, как сделать список определений похожим на это, используя правильный CSS? Или, если я не могу сделать это с <dl>, какова будет рекомендуемая структура?

Answer 1

Это должно сделать это:

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

И в CSS:

dl {
    float: left;
}

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

Применить другой стиль по мере необходимости.Рабочий пример можно найти здесь:

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

Answer 2

Воскрешение вопроса о зомби, но принятый ответ полностью разрушает всю причину использования dl в первую очередь. Есть лучший способ.

Из спецификации HTML для DLs (выделено мной):

Чтобы аннотировать группы с помощью атрибутов микроданных или других глобальных атрибутов, которые применяются ко всем группам, или просто для целей стиля , каждая группа в элементе dl может быть заключена в элемент div . Это не меняет семантику элемента dl.

Конечно, легко решается с помощью 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>