css h1 - 仅与文本一样宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4566100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css h1 - only as wide as the text
提问by tony noriega
I have an H1 style for my site:
我的网站有 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;
}
The background color spans the entire width of the centercol, 500px...
背景颜色跨越整个 centercol 的宽度，500px...
How do I make this H1 only span the width of the text of the H1?
如何让这个 H1 只跨越 H1 的文本宽度？
回答by Chandu
You can use the inline-block value for display, however in this case you will loose the block feature of h1 i.e. the siblings will be displayed inline with h1 if they are inline elements(in which case you can use a line-break
).
您可以使用 inline-block 值进行显示，但是在这种情况下，您将失去 h1 的块功能，即如果兄弟姐妹是内联元素（在这种情况下您可以使用换行符
），它们将与 h1 一起内联显示。
display:inline-block;
回答by Ihor Zenich
Use display: table!
It doesn't break margin collapse like display: inline-blockor float: left.
使用display: table！
它不会像display: inline-block或那样破坏边距崩溃float: left。
回答by Keith
You can use display:inline-blockto force this behavior
您可以使用display:inline-block强制此行为
回答by William
An easy fix for this is to float your H1 element 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;
}
I have put together a simple jsfiddle example that shows the effect of the "float: left" style on the width of your H1 element for anyone looking for a more generic answer:
我整理了一个简单的 jsfiddle 示例，该示例显示了“浮动：左”样式对 H1 元素宽度的影响，供任何寻求更通用答案的人使用：
回答by JakeParis
This is because your <h1>isthe width of the centercol. Specify a width on the <h1>and use margin: 0 auto;if you want it centered.
这是因为你<h1>是centercol 的宽度。在 上指定宽度<h1>并使用（margin: 0 auto;如果您希望它居中）。
Or, alternatively, you could float the <h1>, which would make it only exactly as wide as the text.
或者，您可以浮动<h1>，这将使其仅与文本一样宽。
回答by dibs
I recently solved this problem by using table-caption, though I cannot say if it is recommended. The other answers didn't seem to workout in my case.
我最近通过使用 table-caption 解决了这个问题，但我不能说是否推荐。在我的情况下，其他答案似乎没有锻炼。
h1 {
display: table-caption;
}
回答by Colin Devroe
Somewhat like the other suggestions you could use the following code. However, if you do go the margin: 0 auto; route I'd recommend having the margin for the top and bottom of an H1 be set to something other than 0. So, perhaps margin: 6px auto; or something.
有点像其他建议，您可以使用以下代码。但是，如果您确实需要保证金：0 auto; 路线 我建议将 H1 顶部和底部的边距设置为 0 以外的值。因此，也许 margin: 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;
}
回答by voguess
align-self-start, align-self-center... in flexbox
align-self-start, align-self-center... 在 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;
}
回答by zsalzbank
You could use a <span>instead of an <h1>.
您可以使用 a<span>而不是<h1>。
