0

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

标记：

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

<h3>news</h3>

</div>

CSS：

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

4 回答 4

0

问题是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 内联（在右侧）显示，这在这种情况下可能是不可取的。

或者， float （正如@robooneus 指出的那样）将完成您想要的：

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

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

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

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

但如果你这样做了，最好使用“本机”内联元素，例如span代替div.

然而，理想情况下，您将确定将包含在您的 head 元素中的所有元素，以便我们可以帮助定义适合您情况的最佳布局/样式。

于 2013-09-02T15:28:17.773 回答
0

或者：

HTML：

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

CSS：

h3 span {
    background-color:red
}

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

于 2013-09-02T15:29:11.823 回答
0

使用浮动：

见小提琴：http: //jsfiddle.net/Zb6KV/4/

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

h3 {
    float:left;
  }

然后 h3 和容器将是标题的大小。但是，为什么不直接在 head<h3>元素中添加背景呢？

于 2013-09-02T15:23:12.990 回答
0

div您可以为那个添加一个，而不是为 设置类span。

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

这是更新的小提琴

于 2013-09-02T15:23:54.140 回答