6

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

像这样的东西：

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% 的容器行，包括文本的宽度。无论同一行上有多少文本，如何创建一条在文本之后开始并运行边框的整个宽度的行？

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

谢谢！

4

5 回答 5

8

此方法适用于带纹理的背景（背景图像）：

<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 />充当线，并填充右侧的剩余空间。

于 2013-02-20T22:38:29.923 回答
4

此方法适用于纯色背景色：

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/

这个怎么运作。

  1. 标签有一个类，将高度设置为<h2>它包含的文本高度的一半。

  2. the<h2>有一个底部边框，它延伸到它的父容器的宽度（因为它是一个块元素）。

  3. 内部<span>有<h2>一个白色背景，它将覆盖文本和边框重叠的区域。

  4. 最后，<h2>> 有一个底部边距，可以补偿<h2>.

于 2013-02-20T21:04:50.067 回答
2

你可以使用 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;
}

与其他方法相比的优势：

  • 不需要额外的标记
  • 背景颜色不是必需的

下侧：

于 2013-02-20T21:41:50.460 回答
1

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/

于 2013-02-20T21:03:12.597 回答
0

这是我尝试过并且有效的方法：

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

于 2013-02-20T21:29:48.330 回答