css - 如何在我的文本之后创建一条与容器宽度相同的线？

Question

是的，我是新手所以请放轻松。我知道必须有几种方法来实现这一点。基本上，我一直在尝试想出一种一致的方法，让标题在文本之后有一行，该行将运行到容器元素的整个宽度。

像这样:

This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container

我正在尝试创建一个 .line 类，它将使用底部边框来创建线条，但我一直未能成功创建将扩展容器整个宽度的可变长度线条。

这是我尝试过的:

CSS:

.line
{
    display:inline-block;
    border-bottom:2px #5B3400 solid;
    margin-left:5px;
    width:80%;
}

HTML:

    <h2>Our Mission<span class="line"></span></h2>

当然，这只给我一条距离左边框 80% 的容器行，包括文本的宽度。无论同一行上有多少文本，如何创建一条从文本之后开始并贯穿整个边框宽度的行？

我知道这应该很容易，但我还没有找到解决方案。

谢谢!

Answer 1

此方法适用于带纹理的背景(背景图像):

如果您的 <h2> 您可以尝试使用此方法代替位于背景图片之上。

HTML:

<h2 class="line-title"><span>This is my title</span><hr /></h2>

CSS:

.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}

请参阅此处的工作示例:http://jsfiddle.net/yYBDD/1/

工作原理:

1. <h2>标记充当 float 元素的容器。

2. <span>向左浮动，导致 <hr />向左折叠并填充右侧空间。

3. <hr />充当线条，将右边的剩余空间填满。