在<h1>标记后删除换行符?


93

我在删除<h1>标签后的换行符时遇到问题,因为每次打印时,它都会在标签后直接添加换行符,因此像这样<h1>Hello World!</h1> <h2>Hello Again World!</h2>打印出来:

Hello World!

Hello Again World!

我不确定在CSS中需要更改哪些标签,但是我希望这与填充或边距有关

我也想尽可能保持垂直填充。

Answers:


154

听起来好像您想将它们格式化为嵌入式格式。默认情况下,h1h2是跨越行的整个宽度的块级元素。您可以将它们更改为与CSS内联,如下所示:

h1, h2 {
    display: inline;
}

这是一篇文章,解释了两者之间的区别block以及inline更多细节:http : //www.webdesignfromscratch.com/html-css/css-block-and-inline/

要保持垂直填充,请使用inline-block,如下所示:

h1, h2 {
    display: inline-block;
}

9

<h1>标签已{display: block}设置。它们是块级元素。要关闭此功能:

{display: inline}

默认情况下,h标签使用边距,填充,因此我们必须删除这些标签
Adeel Mughal 2012年

我也想尽可能保持垂直填充,我尝试过display:inline ;,但不再使用垂直填充。
Jack Wilsdon '02

1
删除填充和边距不会删除新行。换行是因为它们是块级元素,这意味着它们占据了显示位置的所有水平空间(默认情况下)。因此,除非您进行浮动,更改显示或其他一些属性,否则h*标签后总是会有换行符。
tkone 2012年

@JackWilsdon Ben Lee已更新,以显示如何轻松维护垂直填充,因此在您进行编辑后,我也不会再烦我。
tkone 2012年

3

我只是通过在HTML样式部分将h1边距值设置为负来解决此问题。它完全可以满足我的需求。

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

2
这适用于删除垂直填充而不是换行符。
2016年

我在Google上搜索了错误的内容,而我发现这个答案实际上正是我想要的。好的解决方案,尽管不是问题的答案。不管怎么说,还是要谢谢你!:)
Semmel

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.