Css 收割台宽度（H1、H2等）

我希望我的标题（h1到h6）有一个背景颜色（与页面背景的颜色不同），我还希望这个背景的宽度与标题中文本的宽度相同，加上填充（而不是标题所在容器的宽度，这就是现在发生的情况）

我向您展示任何代码都没有多大意义，因为这相当简单（或者无论如何都应该如此！）。容器的宽度是固定的。现在我只为h1、h2、h3等标签设置了一些边距、填充、背景颜色和字体样式

---

编辑：我想代码会有帮助的！（这已经应用了Gerald的解决方案，尽管显然这在IE6/7中仍然不起作用，并且在较新的浏览器中仍然存在问题）。使用display:inline会导致比它解决的问题更多的问题，使用上面提到的float:left和clear:left会因为2列布局而出现问题。感谢大家迄今为止的帮助。

h1-h6是块级元素，即使它们不在容器中（或只是主体），它们也会延伸到整个窗口的宽度。一种解决方案是将其显示改为内联块：

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

Testheader

请注意，如果下一个元素不是块级元素（如p），则必须在页眉后手动打断。页眉标记（h1-h6）是块级元素，因此填充其所在容器的宽度。改成

display:inline 

将使背景正好与文本的宽度相等。但这将引入其他问题（因为内联元素在许多其他方面的行为与块元素不同）

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

---

你必须玩一玩，弄清楚在你的情况下什么是有效的。

正如其他人提到的

display:inline block

将是一个选项，但并不适用于所有Broswer。我现在能想到的是给标题一个

float:left和
清除后的元素：左

另一种不那么干净的方法是在标题文本周围添加跨距，并为跨距指定背景色：

<h1><span>your text</span></h1>

h1 span { background-color:#369; }

您的文本
h1 span{背景色：#369；}
我会使用

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


评论后编辑

如果包含的div是浮动的，则clear不会清除左列。因此，将rightcolleft浮动并删除边距

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

我的解决方案是在h1中放置一个span，并改为设置span的样式。
为标题元素添加背景颜色的另一种方法是使用CSS第一行选择器，该元素的宽度仅与其文本相同（不使用额外的元素或显示属性）

例如：

h1:first-line { 
 background-color: yellow;
}

如果您希望您的
hx
h1
、
h2
、
h3
等与其中的文本具有相同的内容，您可以尝试

h1 {
    display:table;
}

它不会像
display:inline block
或
float:left
那样打破边距折叠

请参阅代码片段：


#第页{
背景色：#ededed；
高度：300px；
}
h1{
显示：表格；
背景色：#10c459；
填充：10px；
字体系列：Arial，'Helvetica Neue'，Helvetica，无衬线；
颜色：#fff；
字体大小：24px；
字号：700；
}

你好，世界
如果简单的话，我不知道你需要什么帮助。我意识到我们知道一些你不知道的事情，但向我们展示你的代码可以让我们了解正在应用的样式和定位。它还表明你的标题嵌套得有多深。这是一个为程序员提供帮助的网站；代码对我们很重要。是的，展示代码不会有什么坏处。我想你可能会在firefox和IE中遇到宽度不同的问题，因为你正在设置标题或容器的宽度和填充，这给IE带来了问题。已经添加了指向页面的链接。很遗憾，指向页面的链接已经死了……一些浏览器允许你在任何元素上使用display:inline块，但是IE6/7只在本机显示的元素上接受：inline。和往常一样，IE破坏了大家的聚会。这是正确答案（display:inline block；）。微软已经停止了对IE 6,7的支持，为了彻底消除这种血腥的东西，开发人员也应该停止对IE 6,7的支持（IMO）。不幸的是，这使得内容在左栏中清晰可见，并且相互清除。（见附件）。谢谢你！然后将右列向左浮动，清除将不会清除左列。我将代码添加到我的帖子中。