使用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>

这是我想要实现的结果:

标题:一些文字.

下一页标题更多文字.

但相反,我得到了这个:

标题:一些文字.下一页标题更多文字.

任何建议 - 尽量保持代码简单和整洁.

[更新]

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

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

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

正如小提琴所示: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%;  
}