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

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

定义列表在语义上似乎是最好的选择。

使用新的run-in显示样式可以解决问题：

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

但目前尚未得到广泛支持。如何设置我的定义列表以获得更好的跨浏览器支持（即没有必要），而不更改html（目前我使用显示内联并添加丑陋的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

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

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

Answer 5

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

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