换行后<p>内的文字如果标题也存在，则忽略</p> <p>标签的css

Question

我的目标是让标题与<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

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

Answer 1

首先，您不能在<p>标记内包含任何块级元素。即使你的代码有：

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

它在浏览器中呈现如下：

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

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

使用CSS设置样式。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

对于您的评论，我发现您想要制作<h3>和<p>内联运行内容。我建议保留上面的标记并使用以下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