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

背景色横跨centercol的整个宽度,500px …

我如何使这个H1只跨越H1的文本的宽度?

你可以使用内联块的值来显示,但是在这种情况下,你将失去h1的块特征,即如果它们是内联元素,兄弟将与h1一起显示(在这种情况下,你可以使用换行符
)。

 display:inline-block; 

你可以使用display:inline-block来强制这个行为

使用display: table
它不会像display: inline-block一样折断边距折叠display: inline-blockfloat: left

一个简单的解决方法是将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示例展示给您寻找更通用的答案的任何人的H1元素的宽度“float:left”样式的效果:

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

这是因为你的<h1> centercol的宽度。 在<h1>上指定宽度并使用margin: 0 auto; 如果你想中心。

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

有点像其他build议,你可以使用下面的代码。 但是,如果你去边缘:0汽车; 路线我build议有一个H1的顶部和底部的边缘设置为0以外的东西。所以,也许保证金:6px汽车; 或者其他的东西。

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

alignment自我开始,alignment自我中心…在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>