显示以下段落的内联标题 [英] Display heading inline with following paragraph
问题描述
< h3>工作范围。 < / H3>
Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。< / p>
< p>您可以使用最小化静脉注射的方式，使用ullamco laboris nisi ut aliquip ex ea commodo consequat。< / p>
我想在段落中显示标题，如下所示：
工作范围 Lorem ipsum dolor sit amet，consectetur adipisicing
$
elit，sed do eiusmod tempor incididunt
ut劳伦斯和dolore magna aliqua。
选项1：浮动标题
只要标题符合一行即可。当它没有时，浮动形成一个宽块，所以段落开始在块的右侧，或下面，而不是继续内联：
| |的范围Lorem |
|工作| ipsum |
|坐下，结果|
选项2：同时显示两个元素。
风格规则（如： h3，h3 + * {display：inline;} ）可能有效。这假定他们在&其次是其他块元素。否则，其他内联元素将流入其中。此外，相邻的选择器（ + ）在所有浏览器中都不可用。
选项3？
不添加不必要的类或包装元素，并保持其有效性。语义（在段落内没有 span.h3 ！），有没有更好的方法来做这件简单的事情？ >解决方案
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp：//www.w3。组织/ TR / XHTML1 / DTD / XHTML1-transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< style>
h3 {display：run-in;}
p {display：block; }
div {width：400px; }
< / style>
< / head>
< body>
< div>
< h3>这是一个标题< / h3>
< p>这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体< / p>
< p>这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体，这是一个文本体< / p>
< / div>
< / body>
< / html>
将h3标签放入p标签中。
http://www.quirksmode.org/css/display.html
不能在ie7或更低版本或Firefox中运行，所以不是最好的解决方案。
Given the following 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
I would like to display the heading inline with the paragraph, like so:
SCOPE OF WORK. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Option 1: float the heading.
This works so long as the heading fits on one line. When it doesn't, the float forms a wide block so the paragraph starts to the right of the block, or below instead of continuing inline:
| SCOPE OF | Lorem |
| WORK | ipsum |
| sit amet, consect|
Option 2: display both elements inline.
A style rule such as: h3, h3+* {display: inline;} might work. This assumes that they are preceded & followed by other block elements. Otherwise, other inline elements would flow into them. Also, the adjacent selector (+) is not available in all browsers.
Option 3?
Without adding unnecessary classes or wrapper elements, and keeping it valid & semantic (no span.h3 inside the paragraph!), is there a better way to do this simple thing?
<!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>
That puts the h3 tag in with the p tag. http://www.quirksmode.org/css/display.html doesnt work in ie7 or lower or Firefox at all, so not the best solution
这篇关于显示以下段落的内联标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
