将定义列表设置为简单键值集

Question

我想使用一个简单的定义列表：

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

渲染类似的内容：

name: Tomas
address: this is a very long
wrapping address
age: 29

定义列表在语义上似乎是这里的最佳选择。

使用新的运行显示样式可以解决问题：

<style> dt { display: run-in; } </style>

但这尚未得到广泛支持。如何在不更改 html 的情况下设置定义列表的样式以获得更好的跨浏览器支持（不需要 ie6）（目前我使用内联显示并添加丑陋的 br）？

编辑以澄清：

dt { clear: left; }
dd { float: left; }

不会工作，因为它会呈现为：

name: Tomas
address: this is a very long
         wrapping address
age: 29

设计指定这些多行字段应换行到行首以保留空间。

Answer 1

我认为这可行：

dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 .5em 0 0;
}
dd {
  margin: 0;
  padding: 0;
}

另一个有用的选项是 :after 伪类。您可以跳过每个 dt 元素上的冒号并具有：

dt:after {
  content: ":";
}

这使其更加灵活，您可以在整个列表和网站中更改该字符，或者如果您愿意，可以将其删除它。

要解决您提到的换行问题，您需要设置 dt 和 dd 元素的宽度。或者，使用表格，其中 th 表示名称/地址等，td 表示“数据”。 IMO 表格是语义上可接受的解决方案 - 它是表格数据。

Answer 2

您可以像这样将 dd 浮动到前一个元素的左侧。

dt { clear: left; }
dd { float: left; }

您还可以添加宽度属性以进行额外对齐。

dt { clear: left; width: 20%; }
dd { float: left; }

Answer 3

好吧，你可以简单地让 dt float: left

dt { float: left; }

或者让 dt 内联显示：

dt { display: inline; }

Answer 4

您需要从 dd 中删除默认的左边距。

dt {float:left;clear:left;margin-right:5px;}
dd {margin:0;}

Answer 5

我认为这个（取消注释第一行以测试小宽度）：

dl, dd, dt { margin: 0; }
/*dl { width: 80px; }*/
dl dt, dl dd { display: inline; }
dl dd:after { content: ' '; padding-left: 100%; }