Question

我的网站有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;
}

背景颜色跨越centercol的整个宽度，500px ......

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

Answer 1

您可以使用内联块值进行显示，但是在这种情况下，您将松开h1的块功能，即如果它们是内联元素，则兄弟姐妹将与h1内联显示（在这种情况下，您可以使用一行 - 休息。）。

display:inline-block;

Answer 2

使用display: table！
它并没有像display: inline-block或float: left那样打破保证金崩溃。

Answer 3

您可以使用display:inline-block强制执行此行为

Answer 4

一个简单的解决方法是将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/

Answer 5

这是因为您的<h1> 是centercol的宽度。如果您希望它居中，请在<h1>上指定宽度并使用margin: 0 auto;。

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

Answer 6

我最近通过使用表标题解决了这个问题，尽管我不能说是否建议这样做。在我看来，其他答案似乎并没有奏效。

h1 {
  display: table-caption;
}

Answer 7

有点像其他建议，您可以使用以下代码。但是，如果你去了保证金：0自动;路线我建议将H1的顶部和底部的余量设置为0以外的其他值。因此，可能是保证金：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;
}

Answer 8

align-self-start，align-self-center ... in 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;
}

Answer 9

您可以使用<span>代替<h1>。

css h1 - 仅与文本一样宽

9 个答案: