将定义列表定义为简单的键值集 [英] Style a definitition list as simple key value set

问题描述

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

I'd like to use a definition list as simple as:

<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

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

The definition list seems semantically the best option here.

使用新的run-in显示风格窍门：

Using the new run-in display style will do the trick:

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

但这还没有得到广泛支持。我怎么样式我的定义列表更好的跨浏览器支持（ie6不必要），而不改变html（目前我使用显示内联和添加ugly br的）？

But this isn't widely supported yet. How can I style my definition list for better cross-browser support (ie6 not necessary), without changing the html (currently I use display inline and add ugly br's) ?

编辑以澄清：

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

无效，因为它会呈现为：

won't work because it would render as:

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

设计指定这些多行字段应换行到行的开头以保留空格。

The design specifies that these multi-line field should wrap to the start of line to preserve space.

推荐答案

我认为这会奏效：

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

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

Another option that is useful is the :after pseudo-class. You could skip the colon on each of the dt elements and have:

dt:after {
  content: ":";
}

这使它更灵活，您可以在列表和网站

This makes it more flexible and you can change that character across the list and website as a whole, or get rid of it if you felt like it.

为了解决你提到的包装问题，你需要在 dt 和 dd 元素。或者，使用一个表，其中 th 用于名称/地址等， td 用于数据。 IMO表是一种语义上可接受的解决方案 - 它是表格数据。

To solve the wrapping problem you mentioned, you'll need to set widths on both the dt and dd elements. Or, use a table, with th for name/address etc and td for the "data". IMO a table is a semantically acceptable solution here - it is tabular data.

这篇关于将定义列表定义为简单的键值集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！