代码之家 › 专栏 › 技术社区 › s.bramblet

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

underline html class css

s.bramblet · 技术社区 · 12 年前

是的,我是新手,所以请放松。我知道要做到这一点,必须有几种方法。基本上,我一直在尝试想出一种一致的方法,在文本后面有一行页眉,该行将延伸到容器元素的整个宽度。

类似这样的内容:

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%,包括文本的宽度。如何创建一行,该行从文本之后开始,并贯穿边框的整个宽度,而不管同一行上有多少文本?

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

谢谢

5 回复 | 直到 12 年前

Axel 12 年前

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

如果您的 <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/

工作原理:

这个 <h2> 标记充当浮动元素的容器。
这个 <span> 向左浮动,导致 <hr /> 向左折叠并填充右侧空间。
这个 <小时/> 充当线条,并填充右侧的剩余空间。

Axel 12 年前

此方法将适用于纯色背景色:

HTML格式:

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

CSS格式:

.line-title {
    border-bottom: 1px solid #DDD;
    font-size: 20px;
    height: 12px;
    margin-bottom: 10px;
}

.line-title span {
    background: #FFF;
    padding-right: 10px;
}

您可以在这里看到一个工作示例: http://jsfiddle.net/yYBDD/

它是如何工作的。

这个 <h2> 标记有一个类,它将高度设置为所包含文本高度的一半。
这个 <h2> 有一个底部边界,它延伸到其父容器的宽度(因为它是一个块元素)。
这个 <span> 内部 <h2> 具有白色背景,将覆盖文本和边框重叠的区域。
最后 <h2> >有一个底部边缘,用于补偿 <h2> .

cimmanon 12 年前

您可以使用flexbox来完成此操作。

http://jsfiddle.net/eHHep/ (不包括前缀)

<h1 class="lineme">This is my header</h1>

<h2 class="lineme">This is another header</h2>

.lineme {
    display: flex;
}

.lineme:after {
    display: block;
    content: " ";
    border-bottom: 1px solid;
    flex: 1 1 auto;
}

与其他方法相比的优势:

不需要额外标记
不需要背景颜色

下侧:

由于IE10是第一个支持flexbox的IE,因此对flexbox的支持率较低(请参阅 http://caniuse.com/#search=flexbox )
如果文本换行,则换行

wintercounter 12 年前

HTML格式:

<h2><span>Our Mission</span></h2>

CSS格式:

h2{
    border-bottom: 1px solid #000;
    height: 20px;
    overflow: visible;
    display: block;
    width: 100%;
}

h2 span{
    display: inline-block;
    background: #fff;
    height: 21px;
}

这样,它会溢出底部边界,因为它有更大的高度。

演示: http://jsfiddle.net/afuzk/

Leniel Maccaferri 12 年前

这是我尝试过的,并且奏效了:

HTML格式

<h2>Our Mission</h2>

CSS格式

h2:after
{
    content:       "\00a0";
    border-bottom: solid 2px black;
    position:      fixed;
    top:           0;
    width:         100%;
    margin-left:   3px;
}

要测试的JS Bin: http://jsbin.com/ayuvuc/4