Html 显示与以下段落内联的标题_Html_Css_Semantic Markup

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

html css

Html 显示与以下段落内联的标题,html,css,semantic-markup,Html,Css,Semantic Markup,给定以下语义标记： <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 exercitatio

给定以下语义标记：

<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>

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

诸如：

h3，h3+*{display:inline；}

之类的样式规则可能会起作用。这假定它们前面有其他块元素，后面有其他块元素。否则，其他内联元素将流入其中。此外，相邻选择器（

）在所有浏览器中都不可用

选项3？

在不添加不必要的类或包装器元素并保持其有效性和语义的情况下（在段落中没有

span.h3

），有没有更好的方法来做这件简单的事情？


<!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{display:block；}
div{width:400px；}
这是一个标题
这是正文，这是正文，这是正文，这是正文，这是正文，这是正文，这是正文，这是正文
这是正文，这是正文，这是正文，这是正文，这是正文，这是正文，这是正文，这是正文

这将h3标记与p标记放在一起。

在ie7或更低版本或Firefox中根本不起作用，因此不是最好的解决方案

显示器如何运行：磨合；在那里工作？出于好奇，第二个选项是id的位置，只是想知道为什么必须使用+*您需要将display:inline放在标题后面的元素上，否则段落仍然会显示为自己的块。（仅使h3显示：inline意味着当它被其他块元素包围时，它将形成自己的匿名块。）@ascherr，我不熟悉display:run-in；可能是因为它没有得到广泛的支持。但是，如果你有理由的话，请给我一个答案：即使它只是“在CSS乌托邦中应该是这样工作的”。我假设你无法预测

h3

元素的宽度。（所以

h3{position:relative；}

和

h3+p:first-line{margin left:$width-of-h3；}

不是一个选项？）哈，谢谢，是的，我以前没用过，但实际上有点酷。这是一个非常方便的网站，用于检查类似的内容，我将其保留为书签QuirksMode对于web开发人员和参考来说是非常棒的。似乎只适用于IE（11）。在Firefox（27）和Chrome（32）中都不起作用。遗憾的是，这项功能不可用。Firefox从未支持过它，它从Safari（v8）和Chrome（v32）中都被删除了。然而，它确实准确地描述了OP的要求。

<!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>