Css 如何在文本后创建一条与容器宽度相等的线？

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

大概是这样的：

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

HTML:

我们的使命

当然，这只给了我一行距离左边框80%的容器，包括文本的宽度。如何创建一行，该行从文本后开始，并在整个边框宽度上运行，而不管同一行上有多少文本

我知道这应该很容易，但我还没有找到解决办法

谢谢

HTML：

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

这样，它将溢出底部边界，因为它有更大的高度

---

演示：

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

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

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

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

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

.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;
}

HTML:

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

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

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

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

.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;
}

您可以在此处看到一个工作示例：

它是如何工作的。

标记有一个类，该类将高度设置为所包含文本高度的一半

有一个底部边框，延伸到其父容器的宽度（因为它是块元素）

内部的

具有白色背景，将覆盖文本和边框重叠的区域

最后，

>有一个底部边距，用于补偿

的降低高度

---

以下是我尝试过的一些行之有效的方法：

HTML

<h2>Our Mission</h2>

---

要测试的JS Bin:

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

（不包括前缀）

这是我的标题
这是另一个标题
莱内姆先生{
显示器：flex；
}
.我：以后{
显示：块；
内容：“；
边框底部：1px实心；
flex:1自动；
}

与其他方法相比的优势：

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

反面：

• 由于IE10是第一个支持flexbox的IE，因此对flexbox的支持率较低（请参阅）
• 如果文本环绕，行将消失

---

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

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

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

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

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

.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;
}

如果您的

位于背景图像上方，则可以尝试使用此方法

HTML:

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

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

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

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

.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;
}

请参见此处的工作示例：

工作原理：

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

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

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

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

.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;
}

标记充当浮动元素的容器

向左浮动，导致

向左折叠并填充右侧空间

用作行，并填充右侧的剩余空间

---

好的解决方案thx！你和阿克塞尔在同一个波长上！谢谢。我更喜欢使用类，因为它提供了更多的灵活性。这将是一个完美的解决方案，不幸的是我的页面有纹理背景。在这种情况下，我只需要将背景属性设置为我的纹理吗？@user2092975如果你有纹理，它很可能无法正确排列。这个方法只能在坚实的背景下使用。@user2092975-我添加了另一个答案，它使用了一种不同的技术来处理纹理背景图像。看看吧；）抱歉，wintercounter我是该网站的新手，因此它不会让我遇到两种解决方案！：（另外，在Axel的解决方案下，我添加了一条评论，说我正在使用纹理背景。我认为这让我走上了正确的道路，我现在只需要解决背景问题。Thx！Thx在你的测试中看起来很棒，但对我不起作用。我使用css 2.1，并试图保持与一些旧浏览器的兼容性-是“display:box”吗css 3.0属性？我可以在css 2.1中实现吗？您不需要

显示
属性。尝试不使用它…：）就是这样！太好了，谢谢阿克塞尔！我更改了行以匹配我的字体颜色，并将.line title hr{margin top}调整为27px，以将行放在字体底部（我的字体大小为28px），但除此之外，这正是我想要的！