右边有多个DD的DT？

Question

基本上我想在HTML中实现类似的东西：

  Description:  Element #1
                Element #2
                Element #3 [eventually bla bla bla]
                [...]

用表格开玩笑：

<table>
  <tr>
   <td>Description</td>
   <td>Element #1<br>Element #2<br>Element #3 [eventually bla bla bla]</td>
  </tr>
</table>

但是我应该使用这个表还是？

Answer 1

这并不难，只记得你的组合器：

dt {
    float: left;
    width: 8em;
}

dd {
    margin-left: 9em;
}

dd + dd {
    margin-left: 9em;
}

JS Fiddle demo

参考文献：

• E + F, adajacent-sibling selector。

Answer 2

使用表格确实很容易，而且您还可以选择将每个元素作为自己的单元格：

<table>
  <tr>
   <td rowspan=3>Description
   <td>Element #1
  <tr>
   <td>Element #2
  <tr>
   <td>Element #3 [eventually bla bla bla]
</table>

样式很简单。 （你可能会发现你想要td { vertical-align: top}，也许是一些边框，可能是填充。）所以问题是：为什么不使用简单表的变体，几乎直接给你所需的外观？

使用定义列表标记dl要么强制猜测“描述”文本的宽度，要么使用不能在浏览器中稳健工作的CSS功能。