CSS H1-仅与文本一样宽

我的网站具有H1样式：

.centercol h1 {
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

背景颜色跨越中心col的整个宽度，500像素...

如何使此H1仅跨越H1文本的宽度？

您可以使用inline-block值进行显示，但是在这种情况下，您将失去h1的块功能，即，如果兄弟元素是内联元素，则它们将与h1内联显示（在这种情况下，您可以使用line-break
）。

display:inline-block; 

使用display: table！
它不会像display: inline-block或那样打破边距崩溃float: left。

您可以使用display:inline-block强制这种行为

一个简单的解决方法是将H1元素向左浮动：

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

我整理了一个简单的jsfiddle示例，该示例为任何寻求更通用答案的人展示了“ float：left”样式对您的H1元素宽度的影响：

http://jsfiddle.net/zmEBt/1​​/

这是因为your<h1> 是中心col的宽度。在上指定宽度，<h1>并margin: 0 auto;在需要居中时使用。

或者，您也可以使浮动<h1>，使其仅与文本一样宽。

我最近通过使用表标题解决了这个问题，尽管我不能说是否建议这样做。在我的情况下，其他答案似乎没有得到解决。

h1 {
  display: table-caption;
}

与其他建议有些类似，您可以使用以下代码。但是，如果要这样做，请注意余量：0自动；我建议将H1顶部和底部的边距设置为0以外的值。因此，也许margin：6px auto; 或者其他的东西。

.centercol h1{
    display: inline-block;
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

在Flexbox中对齐自我开始，对齐自我中心...

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    align-self: center;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

您可以使用<span>而不是<h1>。