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-block
或float: 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”样式的效果:
这是因为你的<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>
。