css h1 - 仅与文本一样宽答案

【问题标题】：css h1 - only as wide as the textcss h1 - 仅与文本一样宽
【发布时间】：2011-06-01 18:05:18
【问题描述】：

我的网站有一个 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 文本的宽度？

【问题讨论】：

标签： css

【解决方案1】：

.h1 {
  width: -moz-fit-content;
  width: fit-content;

  // workaround for IE11
  display: table;
}

所有现代浏览器都支持width: fit-content。

对于 IE11，我们可以使用 display: table 模拟这种行为，它不会像 display: inline-block 或 float: left 那样破坏边距折叠。

【讨论】：

这是最好的答案

【解决方案2】：

我最近通过使用 table-caption 解决了这个问题，但我不能说是否推荐。在我的情况下，其他答案似乎没有锻炼。

h1 {
  display: table-caption;
}

【讨论】：

【解决方案3】：

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

【讨论】：

你的回答不完整，你连什么是flexbox都没解释

【解决方案4】：

有点像其他建议，您可以使用以下代码。但是，如果你确实走边距： 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;
}

【讨论】：

【解决方案5】：

解决此问题的一个简单方法是将 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/

【讨论】：

【解决方案6】：

您可以使用display:inline-block 来强制执行此行为

【讨论】：

【解决方案7】：

您可以使用 inline-block 值进行显示，但是在这种情况下，您将失去 h1 的块功能，即如果兄弟姐妹是内联元素，它们将与 h1 内联显示（在这种情况下，您可以使用 line-打破
）。

display:inline-block;

【讨论】：

你也可以试试display:table; 这样你就不需要使用换行符了。
对于那些想知道如何设置块引用宽度（需要适合图片左侧）的人使用 display: block;溢出：隐藏

【解决方案8】：

这是因为你的<h1> 是 centercol 的宽度。在<h1> 上指定一个宽度，如果您希望它居中，请使用margin: 0 auto;。

或者，或者，您可以浮动<h1>，这将使其仅与文本一样宽。

【讨论】：

如果我指定一个宽度，那么一个带有更多文本的 H1 标签会换行，对吗？

【解决方案9】：

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

【讨论】：

改变语义（语义含义）并不是一个很好的主意，只是为了做样式。将<h1>与css属性display: inline-block一起使用会更好。