如何在文本后创建一行到容器的宽度？

Question

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

像这样的东西:

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

我正在尝试创建一个.line类,它将使用bottom-border来创建该行但是我没有成功创建一个可变长度的行来扩展容器的整个宽度.

这是我尝试过的:

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>标签充当一个浮动元素的容器.

2. 该<span>浮动离开,导致<hr />崩溃的左侧,并填写正确的空间.

3. <hr />作为线的行为,并填补右边的剩余空间.