Html 如何在文本中间的 <p></p> 内使用 <h2> 标签 </h2>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4675985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?
提问by heresma
I want to do something like this:
我想做这样的事情：
<p>This is a <h2>text</h2> paragraph.</p>
I disabled margin and padding for the h2 but it still breaks the line before and after the h2 tag. How can I use the h2 tag in the middle of a text and make it look like if it was a normal word, just like < b > does?
我禁用了 h2 的边距和填充，但它仍然在 h2 标签之前和之后断线。如何在文本中间使用 h2 标签并使其看起来像一个普通单词，就像 < b > 那样？
The doctype of my html document is "XHTML 1.0 Transitional"
我的 html 文档的 doctype 是“XHTML 1.0 Transitional”
回答by Jamie Dixon
It is not valid to have a h2inside of a p.
在 a 的h2内部是无效的p。
Aside from that, and to answer your question, a h2is a blocklevel element. Making it an inlinelevel element will cause it to behave similarly to how you describe the btag acting.
除此之外，为了回答您的问题， ah2是一个block级别元素。使其成为inline关卡元素将使其行为类似于您描述b标签行为的方式。
p h2{display:inline}
As I said above though, the HTML you've given is invalid.
正如我上面所说，您提供的 HTML 无效。
回答by Barry Brown
It's not appropriate to use a tag that means "heading" within body text. The <h..>tags are logical tags; their use imparts meaningto the enclosed text -- namely, that the text is a section heading.
在正文中使用表示“标题”的标签是不合适的。该<h..>标签是合乎逻辑的标签; 它们的使用赋予所附文本以含义——即，该文本是一个节标题。
Although you could use the display: inlineattribute, consider using a more appropriate tag, or even a <span>tag.
尽管您可以使用该display: inline属性，但请考虑使用更合适的标签，甚至是<span>标签。
回答by codersarepeople
Don't, the whole point of is that it's a header. Headers are on their own line. Instead, use CSS. Say text and then in a CSS file, choose a font size.
不要，重点是它是一个标题。标题在他们自己的行上。相反，使用 CSS。说出文本，然后在 CSS 文件中选择字体大小。
回答by Kissaki
You'll have to make it
你必须做到
display:inline;
h2 is a block element.
h2 是块元素。
The h2 tag marks a headline, which is per definition not part of a text. So what you're doing is probably not the best way. Consider doing it differently.
h2 标签标记一个标题，它是根据定义而不是文本的一部分。所以你正在做的可能不是最好的方法。考虑采取不同的做法。
回答by Henrique Gon?alves
Create a class like .myH2 (not the best name) with same code of h2 and use a span in p like
使用相同的 h2 代码创建一个像 .myH2（不是最好的名字）这样的类，并在 p 中使用一个跨度
<p>this is <span class="myH2">myH2</span>.</p>
回答by Delmo
Despite of the wrong use of the <h2>tag inside a paragraph, we can style <h2>to keep him into a paragraph. I tested one of the above css trick in Firefox and Chrome as follow:
尽管<h2>在段落中错误地使用了标签，但我们可以通过样式<h2>将他保留在一个段落中。我在 Firefox 和 Chrome 中测试了上述 css 技巧之一，如下所示：
HTML code <p>One paragraph with <h2>title text</h2> in the middle</p>
HTML代码 <p>One paragraph with <h2>title text</h2> in the middle</p>
CSS trick p h2{display:inline}
CSS 技巧 p h2{display:inline}
BUT it doesn't get the result I expect. The browser truncate the paragraph right before the initial h2 tag. Look at DOM from Firebug:
但它没有得到我期望的结果。浏览器在初始 h2 标签之前截断段落。从 Firebug 看 DOM：
Therefore the CSS trick p h2{display:inline}doesn't work properly because CSS rule is not true, i.e. the <h2>tag is not inside the <p>tag. It looks like this:
因此 CSS 技巧p h2{display:inline}不能正常工作，因为 CSS 规则不正确，即<h2>标签不在<p>标签内。它看起来像这样：
Adding CSS trick only for <h2>tag h2{display:inline}is not the definitive solution. It will look like this:
仅为<h2>标签添加 CSS 技巧h2{display:inline}并不是最终的解决方案。它看起来像这样：
The final work-around is:
最后的解决方法是：
HTML code <p class="inline-object">One paragraph with <h2 class="inline-object">title text</h2> in the middle</p>
HTML代码 <p class="inline-object">One paragraph with <h2 class="inline-object">title text</h2> in the middle</p>
CSS trick .inline-object" {display:inline}
CSS 技巧 .inline-object" {display:inline}
This will look as we expect:
这将看起来像我们预期的那样：
If you are trying to mask <h2>title text as ordinary text, just add two more rules to the class .inline-object" {display:inline;font-size: inherit;font-weight: normal;}
如果您尝试将<h2>标题文本屏蔽为普通文本，只需在类中添加两条规则即可.inline-object" {display:inline;font-size: inherit;font-weight: normal;}
回答by Vova Popov
Firefox cutting out my P, because of H2 inside it. And then creating P for
Firefox 删掉了我的 P，因为里面有 H2。然后为
（空段落）。它很好。因为它是自动生成的，为了清除 P 标签，我需要编写数十个 PHP 代码。