html - DT右边有多个DD？

Question

基本上我当然想在 HTML 中实现这样的目标：

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

用 table 这是一个笑话：

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

但是我应该使用桌子还是？

score 5 · Accepted Answer

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

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

dd {
    margin-left: 9em;
}

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

参考：

score -1 · Accepted Answer

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

<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 功能。

2 回答 2