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的文本的宽度？

Answer 1

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

 display:inline-block; 

Answer 2

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

Answer 3

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

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示例展示给您寻找更通用的答案的任何人的H1元素的宽度“float：left”样式的效果：

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

Answer 5

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

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

Answer 6

有点像其他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; } 

Answer 7

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

Answer 8

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