css 识别变量中的换行符,使用CSS时的换行符“display：inline”

I have successfully managed to get a

follow a on the same line, however I wish to repeat this on a new line, but the next is following on from the last

- what should I do?

I have tried various "clear" options, but none break the inline. I don't really want to use
or have an empty

, not overly happy to surround with

either.

Note - I have tried removing the inline from the second element, and while that does place the on a new line, the following

ends up on it's own new line too.

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

Heading:

Some text.

Next Heading:

Some more text.

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

解决方案

Add this:

HTML:

Heading:

Some text.

Next Heading:

Some more text.

CSS:

.inline {display: inline;}

.clear{

clear: both;

display: block;

content: "";

width: 100%;

}