使用CSS时的换行符“display：inline” [英] Line breaks when using CSS "display:inline"

问题描述

我已成功设法在同一行上获得< p> 跟随< h> ，但我想在一个新的行重复这一点，但下一个< h> 从最后< p& code> - 我该怎么办？

我尝试过各种清除选项，但没有打破内联。我真的不想使用< br> 或有一个空的< p> 注意 - 我已尝试删除。 元素中第二个< h> 元素的内联，尽管< h> 在新行上，以下< p> 也会出现在它自己的新行上。

CSS

  .inline {display：inline;} 
 
 .newline {clear：left;} 
   
 
 
 
 HTML 
 < h5 class =inline> Heading：< / h5> 
 
< p class =inline>一些文字。< / p> 
 
< h5 class =inline newline>下一个标题：< / h5> 
 
< p class =inline>一些更多文字。< / p> 
  
这是我要实现的结果：
 
 
但我得到这个：
 
 
 标题：某些文字。 下一个标题有更多文字。
 
 
任何建议 - 尽可能保持代码尽可能简洁。
 
 
 
 [更新] 
 
 
 
暂时我要添加一个空的div hafid2com ，使用以下（只是添加高度来实现所需的结果）：
 
 
 
  .clear {clear：both;显示：block; content：; width：100％; }  
 
 
 
 < div class =clear>< / div>  
 
 
 
如图所示： http：// jsfiddle.net/rxAnk/5/  
解决方案
添加：
 
 
 
 HTML：
 < h5 class =inline> Heading：< / h5> 
 
< p class =inline>一些文字。< / p> 
 
< div class =clear>< / div> 
 
< h5 class =inline>下一主题：< / h5> 
 
< p class =inline>一些更多文字。< / p> 
  
 CSS：
 code> .inline {display：inline;} 
 
 .clear {
 clear：both; 
 display：block; 
 content：; 
 width：100％; 
} 
  
 
I have successfully managed to get a <p> follow a <h> on the same line, however I wish to repeat this on a new line, but the next <h> is following on from the last <p> - what should I do?

I have tried various "clear" options, but none break the inline.  I don't really want to use <br> or have an empty <p>, not overly happy to surround with <div> either.

Note - I have tried removing the inline from the second <h> element, and while that does place the <h> on a new line, the following <p> ends up on it's own new line too.

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>
This is the result I want to achieve:

  
Heading: Some text.
  
  
Next Heading Some more text.
but instead I am getting this:

  
Heading: Some text. Next Heading Some more text.
Any suggestions - trying to keep the code as simple and neat as possible.

[Update]

For the time being I am  going to add an empty div as suggested by hafid2com, using the following (just adding height to achieve the desired result):

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

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

As shown in the fiddle: http://jsfiddle.net/rxAnk/5/
解决方案
Add this:

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%;  
}


                        
这篇关于使用CSS时的换行符“display：inline”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！