标题宽度（H1，H2等） [英] Width of Headers (H1, H2 etc)

问题描述

我希望我的标题（h1到h6）具有背景颜色（不同于页面背景颜色），我也希望此背景的宽度与标题中文本的宽度相同，加padding（不是标题所在的容器的宽度，这是现在发生的事情）。

I want my headers (h1 through h6) to have a background colour (different to that of the page background), I also want the width of this background to be the same as the width of the text in the header, plus padding (Not the width of the container that the header is in, which is what is happening now).

我没有什么意义，显示任何代码这是相当简单（或它应该反正！）。容器是固定宽度的。现在我只为h1，h2，h3等标签设置了一些边距，填充，背景颜色和字体样式。

There isn't much point in me showing you any code as this is fairly simple (or it should be anyway!). The container is a fixed width. Right now I have just some margins, padding, background colour and font styling set for the h1, h2, h3 etc tags.

EDIT：我猜代码会有所帮助！ https://web.archive.org/web/20090724165158/ http://adriantrimble.com/headers （这已经应用Gerald的解决方案，虽然显然这仍然不能在IE6 / 7，仍然有新的浏览器的问题）。使用display：inline会导致比解决更多的问题，使用float：left和clear：left如上所述由于2列布局有问题。非常感谢所有人的帮助。

I guess code would help! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (this has Gerald's solution applied, although obviously this would still not work in IE6/7 and still has problems in newer browsers). Using display:inline causes more problems than it solves, using float: left and clear: left as mentioned has problems because of the 2 column layout. Thanks for everyones help so far.

推荐答案

我会使用

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

---

在注释后编辑

---

edit after comment

如果包含的div浮动，则清除将不会清除左边的col。所以浮动rightcol离开并删除保证金

If the containing div is floated, the clear won't clear the left col. So float rightcol left and remove the margin

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

这篇关于标题宽度（H1，H2等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！