Question

我正在尝试创建一个包含以下内容的节标题：

HEADER NAME -------------------------------------- -----------

多个----是横向规则。可悲的是，hr喜欢采用自己的路线。

有什么想法吗？我更喜欢用CSS和HTML来做这一切。

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 demo

这是发布的，因为它可以工作，虽然可能不在IE中（我目前没有能力测试这个假设，但使用:after伪元素表明它不太可能。但是，它是，适用于更新，最新和符合标准的浏览器。也许是IE9 +？

Answer 2

可以使用容器元素执行此操作，并将header / hr设置为position:absolute

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

Answer 3

一种方法：使用float: left：

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

Answer 4

使用带有两个coulmns的桌子，你最好这样做。

所以你的HTML会是这样的：

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

你的CSS是这样的：

.long {
    width:100%;
}

这是一个例子：

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

Answer 5

另一个选项是inline-block

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

Answer 6

你至少有两个选择： 1.使用图像重复背景作为线条，纯文本背景颜色（提供背景为纯色） 2.（imho更好）：

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

Fiddle

Answer 7

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

应该让你先行一步！

制作水平线会占据文本右侧的其余空间

7 个答案: