标题宽度（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浮动，则清除不会清除左列。 因此将 rightcol 向左浮动并删除边距

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

Answer 3

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

display:inline 

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

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

您必须尝试一下并找出适合您情况的方法。

Answer 4

正如其他人提到的 display:inline-block; 将是一个选项，但不适用于所有浏览器。 我现在能想到的是给标题一个 float:left; 和后面的元素 clear:left;

另一种方式 - 不那么干净 - 是添加跨越标题文本，并为其指定背景颜色：

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

h1 span { background-color:#369; }

Answer 5

如果您希望您的 hx h1、h2、h3 等与中的文本相同它，你可以尝试

h1 {
    display:table;
}

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

请参阅片段：

#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>

Answer 6

我的解决方案是在 h1 内放置一个跨度并设置跨度的样式。

Answer 7

另一种向标题元素添加背景颜色的方法是使用 CSS 首行选择器，标题元素的宽度仅与其文本一样宽（不使用额外的元素或显示属性）；

例子：

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