标题宽度(H1、H2 等)

2022-01-11 00:00:00 header width css

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

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.

我猜代码会有所帮助！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 是浮动的，则 clear 不会清除左列.所以将 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;
}

相关文章