css - 使用 CSS "display:inline"时换行

Question

我已成功获得 <p>关注 <h>在同一行，但是我希望在新行中重复这一点，但是下一个 <h>紧接上一个 <p> - 我该怎么办？

我尝试了各种“清晰”的选项，但没有一个会破坏内联。我真的不想使用 <br>或者有一个空的 <p> ，不太高兴被<div>包围要么。

注意 - 我已尝试删除 inline从第二个<h>元素，虽然确实放置了 <h>在新的一行，以下 <p>也结束了它自己的新行。

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<h5 class="inline newline">Next Heading:</h5>

<p class="inline">Some more text.</p>

这是我想要达到的结果:

Heading: Some text.

Next Heading Some more text.

但我得到的是:

Heading: Some text. Next Heading Some more text.

任何建议 - 尽量使代码尽可能简单和整洁。

[更新]

目前，我将按照 hafid2com 的建议添加一个空的 div，使用以下内容(只需添加高度即可获得所需的结果):

.clear { clear: both; display: block; content: ""; width: 100%; }

<div class="clear"></div>

如 fiddle 所示:http://jsfiddle.net/rxAnk/5/

Answer 1

添加这个:

HTML:

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}