Question

我试图让标题背后的白色背景保持在文本的宽度，而不是一直跑到屏幕的右边，正如它现在所做的那样：

http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/

它应如下所示：http://www.jmakhotels.com/images/title-tag.jpg ...但我无法弄清楚如何设置宽度，使其对不同的标题长度具有动态性。这应该很简单，但它让我疯了！那个.header-title元素应该只是左边和右边文本的宽度+ 10x填充。

这里是蓝色div的CSS（将是图像bgd）和标题元素：

.main-header {
background-color: #009cff;
width: 100%;
height: 300px;

}

.header-title {
    margin: -58px 0 0 18px;
    padding:10px;
    background-color: rgba(255,255,255,.8);
    width:auto;

}

非常感谢能够帮助我解决这个问题的人。

Answer 1

在display:table规则上设置.header-title将解决问题（不会弄乱边距）。

Answer 2

你的.header-title（h2）是一个块元素，它应该是一个内联块元素来获取元素本身的宽度。

但是，您的标题标题可以放在主标题内，而不是放在元素下面。快速解决方法是将.header-title元素从.main-header div下面移动到内部：

<div class="main-header">
    <h2 class="header-title">This will be the title</div>
</div>

您希望标题标题粘贴在主标题的底部，您可以通过给它一个绝对位置来完成此操作。首先，我们需要给主标题一个相对位置：

.main-header {
    position: relative;
}

现在我们可以将header-title定位到main-header元素的底部：

h2.header-title {
    position: absolute;
    bottom: 0; <- stick to the bottom of main-header
    left: 1em;
}

你可以从CSS中的header-title类中删除边距，因为你已经告诉header-title要坚持到主标题的底部。

Answer 3

将.header-title更改为display:inline-block，然后将margin-bottom: -36px;添加到.main-header

所以：

.main-header {
    background-color: #009cff;
    height: 300px;
    margin-bottom: -36px;
    width: 100%;
}

.header-title {
    background-color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    margin: -58px 0 0 18px;
    padding: 10px;
}

也不需要width:auto

Answer 4

尝试添加样式显示：inline-block;

我假设.header-title用于围绕标题的div。你也不应该需要宽度：auto;

背景颜色/宽度在css元素上运行到100％

4 个答案: