1

我有以下内容：

HTML：

<div class="banner-success"> 
    <span class="banner-text">
        You were successful! Yay! Some long reason what your success
        implies goes here.
    </span>
</div>

CSS：

/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
    background-position: 5px 5px;
    background-repeat: no-repeat;
    min-height: 42px;
    padding-left: 47px;
    margin-bottom: 10px;
}

/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
    color: #004400;
    background-color: #DDF2E4;
    background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/

.banner-text
{
    position: relative;
    top: 5px;
}

这允许一个标准横幅，每个横幅都有一个图像和任意文本行，假设图像大小一致。我的问题是 div 的大小就像里面的文本没有被按下一样，所以文本的底线到达了 div 的外面。

有没有办法告诉 div 或任何容器元素，“与你的组成元素一样大，在它们相对于你定位之后”？

4

1 回答 1

0

适用overflow:hidden于.banner-success。

我做了一些调整以使文本周围的填充均匀（并替换背景图像，以便您可以看到它在适当的位置工作）：

http://jsfiddle.net/qTsgL/

干杯!

于 2012-08-20T03:57:05.827 回答