使用CSS时的换行符“display:inline”

前端之家收集整理的这篇文章主要介绍了使用CSS时的换行符“display:inline”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我已成功设法获得< p>跟随< h>在同一条线上,我希望在新的一行重复这一点,但下一个< h>是从最后一个< p>继续- 我该怎么办?

我尝试了各种“清晰”选项,但没有一个打破内联.我真的不想使用< br>或者有一个空的< p>,并不过分乐意用< div>包围无论是.

注意 – 我尝试从第二个< h>中删除内联.元素,虽然确实放置了< h>在新行上,以下< p>最终也是它自己的新线.

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

这是我想要实现的结果:

Heading: Some text.

Next Heading Some more text.

但相反,我得到了这个:

Heading: Some text. Next Heading Some more text.

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

[更新]

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

.clear {clear:both;显示:块;内容:“”;宽度:100%; }

< div class =“clear”>< / div>

如小提琴所示:http://jsfiddle.net/rxAnk/5/

最佳答案
添加这个:

HTML:

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}
原文链接:https://www.f2er.com/css/427336.html

猜你在找的CSS相关文章