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

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

Answer 3

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

display:inline 

将背景带入文本的宽度。不过，这将引入其他问题（因为内联元素在许多其他方面不像块元素那样表现）。

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

您将不得不尝试一下，并找出适合您的情况的方法。

Answer 4

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

另一种方法 - 不那么干净 - 是在标题文本周围添加跨度，并给它一个背景颜色：

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

h1 span { background-color:#369; }

Answer 5

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

h1 {
    display:table;
}

它不会像display: inline-blockor那样破坏边距崩溃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;
}