如何在文本中间使用 <p> 标签内的 <h2> 标签 </h2>？

Question

我想做这样的事情：

<p>This is a <h2>text</h2> paragraph.</p>

我禁用了h2的margin和padding，但它仍会在h2标签之前和之后折行。如何在文本中使用h2标签，并使其看起来像普通单词一样，就像<b>标签一样？

我的html文档的doctype是“XHTML 1.0 Transitional”

- heresma

---

这不是有效的XHTML。你具体想做什么？ - BoltClock

实际上，CSS 标签 display:block 更加合适。 - neverMind9

Answer 1

在 p 元素内部嵌套 h2 是无效的。

除此之外，回答你的问题，h2 是一个块级元素。将其设置为行内元素会使它的行为类似于你描述的 b 标签。

p h2{display:inline}

正如我之前所说的，你提供的 HTML 是无效的。

- Jamie Dixon

---

我可以再次点赞吗？ - Jim L

+1 强调使用有效的代码。 - Michael Irigoyen

Answer 2

在正文中使用表示“标题”的标签是不合适的。 <h..> 标签是逻辑标签；它们的使用赋予了所包含的文本意义 —— 即该文本是一个部分标题。

虽然您可以使用 display: inline 属性，但考虑使用更合适的标签，甚至使用 <span> 标签。

- Barry Brown

---

如果将其放在段落开头作为副标题，会怎样呢？是否仍然最好使用<span>标签？例如：<h1>第一章<h2> <p><h2>第一部分。</h2>文本文本文本文本文本</p> - ahwillia

@AlexWilliams 我知道这是一段时间以前的事情了，但我认为在这种情况下正确的用法应该是 <h1>第一章</h1><h2>第一部分</h2><p>文本...</p>。 - eritbh

不能使用 display: inline。h2 元素将隐式终止 p 元素。 - Quentin

Answer 3

不要这样做，使用 <h1> 的整个意义在于它是一个标题。标题应该单独占一行。相反，请使用 CSS。在 CSS 文件中选择一个字体大小，然后写下文本。

- codersarepeople

---

我可能会在这些词上有点过于严格，但是h代表的是标题（headline），而不是头部（header）。头部是另一回事，而标题则更为广泛地使用（不仅仅是作为头部）。无论如何，请不要太认真对待这个评论……可以说每个标题都是某个东西的头部。但是当我听到头部时，我想到的是网站头部，更像是一个布局元素。 - Kissaki

是的，抱歉，你在技术上是正确的。 - codersarepeople

从“权威来源”来看（http://www.w3.org/TR/html401/struct/global.html#h-7.5.5），它们被称为标题。我甚至更加追求精确！：P - BoltClock

Answer 4

你必须自己制作它

display:inline;

是一个块级元素。

h2标签用于标记标题，根据定义，标题不应该是文本的一部分。因此，您所做的可能不是最佳方式。考虑采用其他方式。

- Kissaki

---

这不仅不是最好的方法，而且完全是错误的。 - BoltClock

Answer 5

尽管在段落内错误使用了

标签，但我们可以对

进行样式设置，使其保留在段落中。我在Firefox和Chrome中测试了上述CSS技巧的一个示例：

HTML代码：<p>One paragraph with <h2>title text</h2> in the middle</p>

CSS技巧：p h2{display:inline}

但是它并没有得到我期望的结果。浏览器会在初始h2标签之前截断段落。请查看Firebug中的DOM：

因此，CSS技巧p h2{display:inline}不能正常工作，因为CSS规则不成立，即<h2>标签不在<p>标签内。它看起来像这样：

仅针对<h2>标签添加CSS技巧h2{display:inline}并不是最终解决方案。它会看起来像这样:

最终的解决方法是：

HTML代码：<p class="inline-object">一个段落，中间有<h2 class="inline-object">标题文字</h2></p> CSS技巧：.inline-object" {display:inline} 这样看起来就像我们期望的那样：

如果您想将 <h2> 标题文本掩盖为普通文本，只需向类 .inline-object" {display:inline;font-size: inherit;font-weight: normal;} 添加两个规则即可。

- Delmo

Answer 6

创建一个类似于.myH2（不是最佳名称）的类，其代码与h2相同，并在p中使用span。

<p>this is <span class="myH2">myH2</span>.</p>

- Henrique Gonçalves

Answer 7

Firefox会因为其中包含H2而剪裁我的P，然后为

（空段落）

创建新的P标签。

这很好。因为它是自动生成的，如果要清理P标签，我需要编写数十行PHP代码。

- Vova Popov