标题宽度(H1,H2等)

Question

我希望我的标题(h1到h6)具有背景颜色(与页面背景的颜色不同),我还希望此背景的宽度与标题中文本的宽度相同,加上填充(不标题所在的容器的宽度,这就是现在发生的事情).

我向你展示任何代码没有多大意义,因为这很简单(或者无论如何都应该!).容器是固定宽度的.现在我只为h1,h2,h3等标签设置了一些边距,填充,背景颜色和字体样式.

编辑:我想代码会有所帮助!https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers(这已经应用了Gerald的解决方案,但显然这在IE6/7中仍然不起作用,并且在新的浏览器中仍然存在问题).使用display:inline导致的问题多于它解决的问题,使用float:left和clear:left因为2列布局而出现问题.感谢大家帮助到目前为止.

Answer 1

h1-h6是块级元素,即使它们不在容器(或只是正文)中,它们也会延伸到窗口的宽度上.一种解决方案是将其显示更改为内联块:

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

请注意,如果下一个元素不是像p这样的块级元素,则必须在标题之后进行手动中断.

Answer 2

我会用

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;} 

评论后编辑

如果包含的div浮动,则clear不会清除左侧col.因此,向右浮动右边并移除边距

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}

Answer 3

标题标签 (h1-h6) 是一个块级元素，因此填充了它所在容器的宽度。将其更改为

display:inline 

将背景带入文本的宽度。但这会引入其他问题（因为内联元素在许多其他方面不像块元素）。

另一种方法是为标题本身设置一个宽度。如果你想变得非常棘手，你可以使用 javascript 来做到这一点，以便它专门为每个标题计算它。

您将不得不玩弄一下并找出适合您的情况的方法。