使水平线占据文本右侧的其余空间 [英] Making a horizontal line take up the rest of the space to the right of text

问题描述

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

I'm trying to make a section header that has:

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

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

其中多个 ---- 是水平规则.可悲的是，hr 喜欢独占一行.

Where the multiple ----'s are the horizontal rule. Sadly, hr's like to take up their own line.

有什么想法吗?我真的更喜欢用 CSS 和 HTML 来完成这一切.

Any ideas? I would really prefer to do this all in CSS and HTML.

推荐答案

最好使用带有两个库姆的表来执行此操作.

You're better off doing this using a table with two coulmns.

所以你的 HTML 应该是这样的:

So your HTML would be something like this:

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

和你的 CSS 是这样的:

and your CSS something like this:

.long {
    width:100%;
}

这是一个例子:

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

这篇关于使水平线占据文本右侧的其余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！