CSS 标题的宽度（H1、H2 等）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1160759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width of Headers (H1, H2 etc)
提问by Adrian Trimble
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 到 h6）具有背景颜色（与页面背景不同），我还希望此背景的宽度与标题中文本的宽度相同，加上填充（不是标题所在容器的宽度，这就是现在发生的事情）。
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.
我没有太多意义向您展示任何代码，因为这相当简单（或者无论如何应该如此！）。容器是固定宽度的。现在我只为 h1、h2、h3 等标签设置了一些边距、填充、背景颜色和字体样式。
EDIT: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.
编辑：我想代码会有所帮助！https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers（这已经应用了 Gerald 的解决方案，尽管显然这在 IE6/7 中仍然不起作用，并且在较新的浏览器中仍然存在问题）。使用 display:inline 会导致比它解决的问题更多的问题，使用 float: left 和 clear: left 如上所述由于 2 列布局而存在问题。到目前为止，感谢大家的帮助。
采纳答案by Emily
I would use
我会用
#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
float:left;
clear:left;
}
#rightcol p {clear:left;}
edit after comment
评论后编辑
If the containing div is floated, the clear won't clear the left col. So float rightcol left and remove the margin
如果浮动包含 div，则清除不会清除左列。所以向左浮动 rightcol 并删除边距
#rightcol {
float:left;
padding:70px 20px 20px 0px;
width:585px;
}
回答by Gerald Senarclens de Grancy
h1-h6 are block level elements and even if they are not in a container (or just body) they'll stretch over the width of the window. One solution is to change their display to be inline-block instead:
h1-h6 是块级元素，即使它们不在容器（或只是主体）中，它们也会延伸到窗口的宽度上。一种解决方案是将它们的显示改为内联块：
<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>
Note that you'd have to make a manual break after the header if the next element isn't a block-level element like p.
请注意，如果下一个元素不是像 p 这样的块级元素，则您必须在标题后进行手动中断。
回答by Gabriel Hurley
A header tag (h1-h6) is a block-level element and thus fills the width of the container it's in. Changing it to
标题标签 (h1-h6) 是一个块级元素，因此填充了它所在容器的宽度。将其更改为
display:inline
will bring the background in to just the width of the text. This will introduce other issues though (since inline elements don't behave like block elements in lots of other ways).
将背景带入文本的宽度。但这会引入其他问题（因为内联元素在许多其他方面不像块元素）。
The alternative is to set a width for the header itself. If you wanted to be really tricky you could do that with javascript so that it calculates it for each header specifically.
另一种方法是为标题本身设置一个宽度。如果你想变得非常棘手，你可以使用 javascript 来做到这一点，以便它专门为每个标题计算它。
You'll have to play around a bit and figure out what works in your situation.
您将不得不玩弄一下并找出适合您的情况的方法。
回答by knittl
as others mentioned display:inline-block;would be an option, but does not work in all broswers. what i could think of right now is giving the headers a float:left;and the element that follows a clear:left;
正如其他人提到的display:inline-block;那样，这将是一种选择，但不适用于所有浏览器。我现在能想到的是给标题 afloat:left;和后面的元素clear:left;
another way - not as clean - is to add spans around your heading's text, and give that spans a background color:
另一种方法 - 不是那么干净 - 是在标题文本周围添加跨度，并为该跨度指定背景颜色：
<h1><span>your text</span></h1>
h1 span { background-color:#369; }
回答by Sébastien Gicquel
If you want your hxh1, h2, h3, etc. to have the same with as the text in it, you could try
如果您希望您的hxh1, h2,h3等与其中的文本相同，您可以尝试
h1 {
display:table;
}
It doesn't break margin collapse like display: inline-blockor float: left.
它不会像display: inline-block或那样破坏边距崩溃float: left。
See snippet :
见片段：
#page {
background-color: #ededed;
height: 300px;
}
h1 {
display: table;
background-color: #10c459;
padding: 10px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #fff;
font-size: 24px;
font-weight: 700;
}<div id="page">
<h1>Hello world</h1>
</div>回答by jasonc65
My solution was to put a span inside the h1 and style the span instead.
我的解决方案是在 h1 内放置一个跨度并改为设置跨度样式。
回答by tonesforchris
Another way to add a background colour to a header element which only is as wide as its text (without using extra elements or display properties) is to use the CSS first-line selector;
另一种向仅与其文本一样宽的标题元素添加背景颜色（不使用额外元素或显示属性）的方法是使用 CSS 第一行选择器；
Example:
例子：
h1:first-line {
background-color: yellow;
}
