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

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

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

score 8 · Accepted Answer

我认为这会起作用：

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 表格在这里是语义上可接受的解决方案 - 它是表格数据。

score 0 · Accepted Answer

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

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

您还可以向其中一个添加宽度属性以进行额外对齐。

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

score 0 · Accepted Answer

好吧，你可以简单地让 dt 浮动：left

dt { float: left; }

否则让 dt 显示内联：

dt { display: inline; }

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

5 回答 5