DT右边有多个DD？答案

【问题标题】：DT with multiple DD on the right?DT右边有多个DD？
【发布时间】：2019-12-29 05:14:00
【问题描述】：

基本上我当然想在 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>

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

【问题讨论】：

twitter 的 bootstrap 中有一个很好的例子：twitter.github.com/bootstrap/base-css.html#typography（向下滚动一点，您会在右侧看到标题“Horizontal description”）

标签： html css

【解决方案1】：

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

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

dd {
    margin-left: 9em;
}

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

参考资料：

【讨论】：

第三条规则不是没用吗？ dd + dd
试用演示没有它，看看它的作用。
确实我做了，没有任何改变，这就是我问 XD 的原因
啊。 ...嗯，在这种情况下，是的。它似乎是。我记得以前在这种布局上遇到过问题，当时我把它排除在外。尽管我怀疑在那种情况下我一定是在做一些不同的事情。那你的选择。 =)
如果你的第二条规则已经设置了dd的margin-left，我认为再次dd+dd规则显然没用

【解决方案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 功能。

【讨论】：