如果标题也存在，换行符 后 内的文本将忽略 标记的 css

Question

我的目标是让标题与  标签内的文本内联......所有这些都有一个 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

现在，如果我从段落标签中取出标题标签，段落文本会正常运行，但显然不会与标题内联，这就是目标。

Answer 1

首先， 标签内不能有任何块级元素。即使您的代码有：

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

它在浏览器中呈现如下：

因此，最好使用如下正确的代码：

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

并使用 CSS 设置样式。

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

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

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

根据您的评论，我发现您想让 <h3> 和  内联运行内容。我建议保留上面的标记并使用以下 CSS:

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

Answer 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

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

Text inside <p> after line break <br> ignores css for <p> tag if heading is also present

html

css

inline

display

html-heading