将定义列表定义为简单的键值集 [英] 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屋!