标题宽度（H1、H2 等）答案

【问题标题】：Width of Headers (H1, H2 etc)标题宽度（H1、H2 等）
【发布时间】：2010-11-12 17:51:19
【问题描述】：

我希望我的标题（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 列布局而存在问题。感谢大家到目前为止的帮助。

【问题讨论】：

如果这很简单，我对您需要帮助感到困惑。我意识到我们知道一些你不知道的事情，但是向我们展示你的代码可以让我们弄清楚正在应用哪些样式和定位。它还展示了您嵌套标题的深度。这是一个程序员帮助程序员的网站；代码对我们很重要。
是的，显示代码不会有什么坏处。我假设您可能会遇到宽度在 Firefox 和 IE 中不同的问题，因为您在标题或容器上设置宽度和填充，这会给 IE 带来问题。
已添加页面链接。
好吧，该页面的链接已经失效了...

标签： css header width

【解决方案1】：

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

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

请注意，如果下一个元素不是像 p 这样的块级元素，则必须在标题后手动中断。

【讨论】：

一些浏览器允许你在任何元素上使用 display:inline-block，但是 IE6/7 只接受它在原生 display:inline 的元素上。像往常一样，IE 破坏了所有人的聚会。
这是正确答案（display:inline-block;）。 Microsoft 已停止对 IE 6,7 的支持，为了彻底消除这种血腥的东西，开发人员也应该停止支持 (IMO)。

【解决方案2】：

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

display:inline

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

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

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

【讨论】：

【解决方案3】：

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

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

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

h1 span { background-color:#369; }

【讨论】：

【解决方案4】：

我会用

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

【讨论】：

不幸的是，这使内容清除了左列以及相互清除。（见adriantrimble.com/headers/clear.html）。不过谢谢！
然后将右列向左浮动，清除不会清除左列。我将代码添加到我的帖子中。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

例子：

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

【讨论】：

【解决方案7】：

如果你想让你的hxh1、h2、h3等和里面的文字一样，你可以试试

h1 {
    display:table;
}

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

见sn-p：

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

【讨论】：