如何在CSS中内联显示标题和段落元素？

Question

我有一个包含一个标题和两个段落元素的HTML代码：

<div class="inter">

<h4>Note</h4>

<p>To add/remove a dependent or to modify your spouse's insurer information,  go to the My Life Events section and follow the instructions.</p>

<p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p>

</div>

我希望以下列方式显示上述代码：

我尝试使用div.inter>p,h4 { display: inline;}，但通过使用此功能，我无法在两个段落之间创建换行符（如下所示）。

  

注意：添加/删除受抚养人或修改配偶的保险公司   信息，请转到我的生活事件部分，然后按照   说明。要修改您的受益人，请填写并签字   受益人指定表格并将其返回到您的计划   管理员。

Answer 1

浮动标题<h4>。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.inter > h4 {
  float: left;
  padding-right: .5em;
}
p {
  margin-bottom: 1em;
}

＆＃13;

<div class="inter">

  <h4>Note</h4>

  <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and follow the instructions.</p>

  <p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

H2 ....是块级元素。

最好使用H4而不是span标签。因为如果使用span标记意味着不需要为同一行编写代码

“span标记仅为默认的内联元素”

那么什么样的风格写在跨度。尝试轻松制作代码。

Answer 3

只需添加以下css即可。

.inter h4, p:nth-of-type(1) { display: inline !important;}

示例：http://codepen.io/Nasir_T/pen/edwqZz