我试图使用display：run-in来创建一个语义和漂亮的元数据名称 – 值列表,这样说：
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <title>Run-in description list test</title> <style> dt { font-weight: bold; display: run-in; } dt:after { content: ": " } </style> </head> <body> <dl> <dt>Subject</dt> <dd>A Question</dd> <dt>From</dt> <dd>Mr Smith</dd> <dt>Time</dt> <dd>2013-08-05</dd> </dl> </body> </html>
预期的结果是
主题：一个问题
来自：史密斯先生
时间：2013-08-05
你可以观看它live.(实际上,在我开始讨论XHTML 2.0中的di元素之后,Ian Hickson给我使用display：run-in的想法.另一种方法是使用float,但是附带一个困难的数量.)
直到最近,除了Firefox之外,它在每个现代浏览器中都运行得非常好(也就是说,它在Internet Explorer,Google Chrome,Opera和Safari(我认为)中完美运行).但是最近我发现它不再适用于谷歌浏览器了.
解决方法
我不知道Chrome对显示器的支持有任何改变：run-in但设置似乎总是不受欢迎.
Hixie一直反对< di>我有点理解为什么. HTML是一种语义语言,语义完全由dl / dt / dd定义.唯一的实际问题是表现性的,这使得它成为CSS问题,而不是HTML问题.
不幸的是,然后CSS的当前状态似乎无法胜任.对于dl / dt / dd,以及许多类似的问题,我们确实需要一种机制来在伪元素中包装元素组,然后可以执行< di>的角色.
显然,没有当前设置可以执行显示：run-in应该这样做.话虽如此,在您的特定测试用例中,您可以使用此CSS实现相同的效果：
dt {
font-weight: bold;
display: inline;
}
dt:after {
content: ": ";
}
dd {
display: inline;
margin:0;
}
dd:after {
content:'\0A';
white-space:pre;
}
