显示与以下段落内联的标题答案

【问题标题】：Display heading inline with following paragraph显示与以下段落内联的标题
【发布时间】：2011-04-19 02:09:11
【问题描述】：

给定以下语义标记：

<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

我想显示与段落内联的标题，如下所示：

工作范围。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidudunt ut laboure et dolore magna aliqua。

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

选项 1：浮动标题。

只要标题适合一行，它就可以工作。如果没有，浮动会形成一个宽块，因此段落从块的右侧或下方开始，而不是继续内联：

| SCOPE OF | Lorem |
| WORK     | ipsum |
| sit amet, consect|

选项 2：内联显示两个元素。

诸如h3, h3+* {display: inline;} 之类的样式规则可能会起作用。这假设它们在其他块元素之前和之后。否则，其他内联元素会流入其中。此外，并非所有浏览器都提供相邻选择器 (+)。

选项 3？

不添加不必要的类或包装元素，并保持其有效和语义（段落内没有span.h3！），有没有更好的方法来做这个简单的事情？

【问题讨论】：

如何显示：磨合；在那里工作？只是出于好奇，第二个选项是 id 去哪里，只是想知道为什么你必须有 +*
您需要将 display:inline 放在标题后面的元素上，否则该段落仍将显示为自己的块。（只是让 h3 display:inline 意味着当它被其他块元素包围时，它会形成自己的匿名块。）
@Ascherer，我不熟悉 display:run-in;可能是因为它没有得到广泛支持。但是，如果你能提出一个理由，请给我一个答案：即使它只是“这就是它在 CSS 乌托邦中应该如何工作”。
我假设您无法预测 h3 元素的宽度。（所以h3 {position: relative;} 和h3 + p:first-line {margin-left: $width-of-h3; } 不是一个选项？）

标签： html css semantic-markup

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h3 {display:run-in;}
p { display:block; }
div { width: 400px; }
</style>
</head>

<body>
<div>
    <h3> this is a title </h3>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
</div>
</body>
</html>

这将 h3 标签与 p 标签放在一起。 http://www.quirksmode.org/css/display.html 根本无法在 ie7 或更低版本或 Firefox 中使用，因此不是最佳解决方案

【讨论】：

哈，谢谢，是的，我以前没用过，但它实际上有点酷。这也是一个非常方便的网站，用于检查类似的东西，我把它加了书签
Quirksmode is 非常适合 web 开发和参考。
似乎只适用于 IE (11)。不适用于 Firefox (27) 和 Chrome (32)。
很遗憾，这个功能是not ready for production。 Firefox 从未支持它，它已从 Safari (v8) 和 Chrome (v32) 中删除。但是，它确实准确地描述了 OP 的要求。