我尝试过使用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>
预期结果是
Subject:一个问题
From:史密斯先生
Time:2013-08-05
你可以观看live http://privat.rejbrand.se/runindl.html。 （实际上，使用的想法display: run-in在我开始喋喋不休地谈论di来自 XHTML 2.0 的元素。一种替代方法是使用float，但这会带来许多困难。）
直到最近，这在除 Firefox 之外的所有现代浏览器中都表现出色（也就是说，它在 Internet Explorer、Google Chrome、Opera 和 Safari（我认为）中完美运行）。但最近我发现它不再在 Google Chrome 中运行。
问题：Google Chrome 是否已放弃支持display: run-in？是否有其他方法可以以相同的方式工作？
我不知道 Chrome 对以下内容的支持有任何变化display:run-in但这个环境似乎总是不受欢迎。
Hixie 一直反对<di>我有点明白为什么。 HTML 是一种语义语言，语义完全由dl/dt/dd。唯一的实际问题是表现性问题，这使其成为 CSS 问题，而不是 HTML 问题。
不幸的是，CSS 目前的状态似乎无法胜任这项工作。对于 dl/dt/dd 以及许多类似的问题，我们确实需要一种将元素组包装在伪元素中的机制，然后该伪元素可以执行<di>.
显然，当前没有设置可以执行此操作display:run-in应该做的。话虽如此，在您的特定测试用例中，您可以使用此 CSS 达到相同的效果：
dt {
font-weight: bold;
display: inline;
}
dt:after {
content: ": ";
}
dd {
display: inline;
margin:0;
}
dd:after {
content:'\0A';
white-space:pre;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
