使水平线占据文本右侧剩余空间

Question

我正在尝试制作一个带有以下内容的部分标题：

标题名称 -------------------------------------------------

其中多个“----”是水平线。不幸的是，hr会单独占用一行。

有什么想法吗？我非常希望能够在CSS和HTML中完成所有这些内容。

- Freesnöw

Answer 1

一种稍微复杂的方法，依赖于一些曲折的标记：

<h1 title="Header text">Header text<span></span></h1>

还有CSS：

h1 {
    position: relative;
    text-indent: 0;
}
h1:after {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
}
h1 span {
    display: block;
    position: absolute;
    right: 0;
    top: 49%;
    bottom: 49%;
    min-width: 90%;
    border-bottom: 2px solid #ccc;
}

JS Fiddle演示

这是因为它可以正常工作，尽管可能不适用于IE浏览器（我目前没有测试该假设的能力，但使用: after伪元素表明这不太可能）。然而，对于较新、更新和符合标准的浏览器来说，这是一个选择。所以也许适用于IE9+？

- David Thomas

Answer 2

您可以使用容器元素，并将标题/水平线设置为position:absolute

示例 jsfiddle

<div id="headerContainer">
    <hr />
    <h1>Header</h1>
</div>

CSS（层叠样式表）：

#headerContainer {position:relative;font-size:20px;height:30px;}
hr {position:absolute;width:100%;}
h1 {position:absolute;background-color:#fff;padding:0 20px;}

- MikeM

Answer 3

<span style="float: left;">My title</span><hr />

应该会给你一个起点！

- einord

---

与其他解决方案不同，这个解决方案不需要您在文本上设置固定的背景颜色来隐藏线条。 例如，您可以通过将其设置为position: relative并使用top: 1em来定位hr。您可以使用边框样式（如border: 1px solid #999）来为hr设置样式。 - Pascal Lindelauf

Answer 4

一种方法：使用 float: left：

<span style="float: left;">Heading</span><hr style="float: left; width: 95%;" />

- JJ.

Answer 5

最好使用具有两列的表格来完成此操作。

因此，您的HTML代码应该类似于以下内容：

<table>
    <tr>
        <td><h1>MOO</h1></td>
        <td class="long"><hr /></td>
    </tr>
</table>

你的 CSS 大概是这样的：

.long {
    width:100%;
}

这是一个例子：

http://jsfiddle.net/nayish/xzcX2/

- Nachshon Schwartz

Answer 6

另一个选项是inline-block

<span>TEXT<hr style="display:inline-block;width:95%;"></span>

- phill

Answer 7

你至少有两个选择： 1. 使用重复背景的图像作为线条，文本背景使用纯色（提供的背景是纯色）。 2. （在我看来更好）：

div { border-top:1px solid black; height:20px; line-height:20px;}
div > span { position:relative; top:-12px; background:white; display:inline-block;}

小提琴

- Litek