如何横向进行<dl>布局？

Question

我正在尝试为我的网站开发一个布局,其中定义列表的元素将水平排列,有点像这样:

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

有人知道使用有效的CSS制作定义列表的方法吗？或者,如果我不能用a <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僵尸问题复活，但接受的答案完全打破了首先使用 a 的整个原因。有更好的方法。

来自DL 的 HTML 规范（重点是我的）：

为了使用微数据属性或适用于整个组的其他全局属性来注释组，或者仅出于样式目的，可以将 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>