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

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表是一种语义上可接受的解决方案 - 它是表格数据.