如果标题也存在，则换行符 <br> 后 <p> 内的文本将忽略 <p> 标记的 css答案

【问题标题】：Text inside <p> after line break <br> ignores css for <p> tag if heading is also present如果标题也存在，则换行符 <br> 后 <p> 内的文本将忽略 <p> 标记的 css
【发布时间】：2016-10-12 14:22:11
【问题描述】：

我的目标是让标题与 <p> 标记内的文本内联...所有这些都具有 margin 到容器的填充

我有以下html代码

<div id='homeContent'>
  <!-- other headings and content here -->

  <p><h3>Heading</h3> some text</br> more text</p>

  <!-- other headings and content here -->
</div>

使用以下 CSS

#homeContent h3, #homeContent h4, #homeContent p {
  z-index: 0;
  margin: 0px 16px;
  padding-top: 8px;
}

#homeContent h3, #homeContent h4 {
  display: inline;
}
#homeContent {
  padding: 0px 16px;
  margin: 32px 0px;
}

这是我想要发生的事情（将代码块视为容器边框）

      H3 HEADING some text
      more text here

这是我实际得到的

      H3 HEADING some text
  more text here <-- notice here the text does not respect the margin given to the <p> tag

现在，如果我将标题标签从段落标签中取出，则段落文本的行为正确，但显然不会与标题内联，这是目标。

【问题讨论】：

标签： html css inline display html-heading

【解决方案1】：

首先，<p> 标签内不能有任何 block level 元素。即使您的代码有：

<p><h3>Heading</h3> some text</br> more text</p>

它在浏览器中呈现如下：

所以，最好使用正确的代码，例如：

<h3>Heading</h3>
<p> some text</br> more text</p>

并使用 CSS 设置样式。

段落和标题是两种不同的动物。根据您在 cmets 中的需要，我会推荐这个标记：

h3 {color: red;}
h3 span {font-weight: normal; font-size: 0.8em;}

&lt;h3&gt;Heading &lt;span&gt;some text&lt;/br&gt; more text&lt;/span&gt;&lt;/h3&gt;

除了你的 cmets，我可以发现你想让你的 <h3> 和 <p> 内联运行内容。我建议保留上述标记并使用以下 CSS：

h3, h3 + p {display: inline-block; /* Or inline */}

【讨论】：

我明白这是怎么回事...我的问题是如何解决它？说“相应地设置样式”就像说，回答你自己的问题。
你需要display: inline你的p标签以及h3。默认情况下，p 标签显示为块元素，这意味着它们显示在新行上。除此之外，您还必须删除您在z-index 下方的行中看到的边距。
@Constantine 试试这个：<h3>Heading <span>some text</br> more text</span></h3>。我相信这比你所拥有的要好。并为h3 span {} 赋予不同的样式。
如果我让<p> 拥有display: inline 它会破坏我的其余内容...因为我实际上希望<p> 成为一个段落，即一个文本块
我最终在<h3> 标签内使用了<span>...谢谢

【解决方案2】：

这是一个解决方案：

<div id='homeContent'>
  <!-- other headings and content here -->
<div class="heading">
  <h3>Heading</h3> <p class="p-heading1">Some text</p>
  <p class="p-heading2">More text here</p>
</div>
  <!-- other headings and content here -->
</div>

#homeContent h3, #homeContent h4, #homeContent p {
  z-index: 0;
  margin: 0px;
  padding-top: 8px;
}
.heading{
  margin-left:16px;
}

#homeContent h3, #homeContent h4, .p-heading1{
  display: inline-block;
}
#homeContent {
  padding: 0px 16px;
  margin: 32px 0px;
}

这是一个 JsFiddle：DEMO

【讨论】：