Question

我一直在尝试使标题的背景与标题的宽度相同，并且还希望背景图像自动调整大小以适合标题。请帮忙看看小提琴：here

标记：

<div class="custom-section-head">

<h3>news</h3>

</div>

CSS：

.custom-section-head {
background: red;
}

Answer 1

使用浮动：

请参阅小提琴：http://jsfiddle.net/Zb6KV/4/

.custom-section-head {
    background: red;
    float:left;
}

h3 {
    float:left;
  }

然后h3和容器将是标题的大小。但是，为什么不将背景添加到头<h3>元素？

Answer 2

您可以为此添加div，而不是为span设置课程。

<h3><span class="custom-section-head">news</span></h3>

以下是更新的 fiddle

Answer 3

问题是div元素是块级元素。这意味着它将占用可用空间的整个宽度。为此元素指定背景意味着它还将填充可用空间的整个宽度。

那个div里面还会有什么？最好的答案很大程度上取决于那个。

有一些技巧可供使用。这取决于您对布局的要求。

我个人更喜欢使用display:inline-block;技术：

.custom-section-head {
    background: red;
    display:inline-block;
    /* IE7 Hack to make inline-block work */
    zoom: 1;
    *display: inline;
}

但是，这将允许使用head div在内联（右侧）显示其他元素，在这种情况下这可能是不可取的。

或者，浮动（如@robooneus指出的那样）将完成您想要的任务：

.custom-section-head {
    float: left;
    background: red;
}

最后，您可以使用完整的“内联”布局（可能不是正确的选项，但为了完整性，我已将其包括在内）：

.custom-section-head {
    display:inline;
    background: red;
}

.custom-section-head h3 {
    display:inline;
}

但是如果你这样做，最好使用“原生”内联元素，例如span而不是div。

但是，理想情况下，您会识别将包含在head元素中的所有元素，以便我们可以帮助您为您的情况定义最佳布局/样式。

Answer 4

可替换地：

HTML：

<h3><span>news</span></h3>

CSS：

h3 span {
    background-color:red
}

如果您准备降级IE8，可以使用background-size: contain;使背景图像适合

如何使标题的背景与标题长度相同？

4 个答案: