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

概述我想使用一个简单的定义列表： <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: Tomasaddress: this is a very 我想使用一个简单的定义列表：

<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: Tomasaddress: this is a very longwrapPing addressage: 29

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

使用新的run-in显示样式将起到作用：

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

但目前尚未得到广泛支持.如何设置我的定义列表以获得更好的跨浏览器支持(即没有必要),而不更改HTML(目前我使用显示内联并添加丑陋的br)？

编辑澄清：

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

将无法工作,因为它将呈现为：

name: Tomasaddress: this is a very long         wrapPing addressage: 29

设计指定这些多行字段应包裹到行的起始处以保留空间.

解决方法 我认为这会奏效：

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

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

dt:after {  content: ":";}

这使它更灵活,您可以在整个列表和网站上更改该字符,或者如果您愿意,可以删除它.

要解决您提到的包装问题,您需要在dt和dd元素上设置宽度.或者,使用表格,其中包含名称/地址等,td表示“数据”. IMO表是一种语义上可接受的解决方案 – 它是表格数据.

总结

以上是内存溢出为你收集整理的html – 将定义列表设置为简单键值集全部内容，希望文章能够帮你解决html – 将定义列表设置为简单键值集所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。