css h1 - 仅与文本一样宽

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

您可以使用 a<span>代替<h1>.