by following on the same line, however I want to repeat this on a new line,...">
Geek asks and answers

Line break when using CSS "display: inline"

I managed to get <p>by following <h>on the same line, however I want to repeat this on a new line, but the next <h>follows the last <p>- what should I do?

I tried various “clear” options, but none broke the line. I really do not want to use <br>or have an empty <p>, not too happy to surround with <div>.

Note. I tried removing inlinefrom the second element <h>, and while it is putting <h>in a new line, the next one <p>ends on its own line.

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:

Title ..

.

:

: . .

- .

[]

div, hafid2com, ( ):

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

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

: http://jsfiddle.net/rxAnk/5/

+5
5

:

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

:

1) float, display:

<style type="text/css">
    h5 {float:left;clear:left;}
    p {float:left;}
</style>

<h5>Heading:</h5>
<p>Some text.</p>
<h5>Next Heading:</h5>
<p>Some more text.</p>

2) <h5> <strong> <p> ( @Ralph.m , <h5> <p> ):

<p><strong>Heading:</strong> Some text.</p>
<p><strong>Next Heading:</strong> Some more text.</p>

3) display:inline; <h5> <p> <div>:

<style type="text/css">
    h5, p {display:inline;}
</style>

<div>
    <h5>Heading:</h5>
    <p>Some text.</p>
</div>
<div>
    <h5>Next Heading:</h5>
    <p>Some more text.</p>
</div>
+2

, . , HTML , . , -, H5, , H4 ..

, - :

<style type="text/css">
  p span {font-weight: bold;}
</style>

<p><span>Heading:</span> Some text.</p>
<p><span>Next Heading:</span> Some more text.</p>

, , <p> <hx>, , .

( , float display: inline-block. <h5> <p>, .)

+1

BoltClock, float. :

CSS

.inline {float:left;}
.clear {clear:both;}

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>

http://jsfiddle.net/rxAnk/

+1

, , :before . \A, \00000a, ISO-10646 (U + 000A).

http://jsfiddle.net/TwoD/ujhwLouc/

CSS

.inline {display: inline;}
h5.inline.newline:before {content: '\A'; white-space:pre-line;}

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>
0

More articles:


All Articles