Question

我希望我的标题（h1到h6）具有背景颜色（与页面背景的颜色不同），我还希望此背景的宽度与标题中文本的宽度相同，再加上padding（不是标题所在容器的宽度，这就是现在发生的事情）。

我没有太多要向你展示任何代码，因为这很简单（或者无论如何都应该！）。容器是固定宽度的。现在我只为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不会清除左侧col。所以向右浮动右边并移除边距

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

Answer 3

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

display:inline

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

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

你必须要玩一下，找出适合你情况的方法。

Answer 4

正如其他人提到的display:inline-block;将是一个选项，但并不适用于所有的broswers。我现在能想到的是给标题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中放置一个span并改为调整span。

Answer 7

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

示例：

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

标题宽度（H1，H2等）

7 个答案: