如何在 hr 标签中添加一些文本？答案

【问题标题】：How to add some text to a hr tag?如何在 hr 标签中添加一些文本？
【发布时间】：2012-05-12 22:04:09
【问题描述】：

我正在尝试在 hr 标记的末尾添加一些文本，但到目前为止我还没有设法让它正常工作。

我希望有一行 --------------------- 顶部有一些文本。
你可以在这里看到我的小提琴http://jsfiddle.net/2BHYr/

编辑：

我想要的是：

__________________________Top

【问题讨论】：

你能画出与你期望的相似的东西吗？不太确定你需要什么
不太明白你想要什么，但最终做了一些事情jsfiddle.net/oswaldoacauan/2BHYr/11
请创建一个正确输出的图像（即使在Mspaint中）并在此处发布。我们并不完全了解您在寻找什么。
我只让它作为一个绝对定位的元素工作，但使用HR-tag 及其标题属性：jsfiddle.net/feeela/Cfwmz
@feeela 尽管这很简洁，但 :after 伪选择器在大多数现有版本的 IE 中都不起作用，并且不允许将文本制作成链接。

标签： html css

【解决方案1】：

我相信我已经明白你想要什么了。这是小提琴：
http://jsfiddle.net/fMJm2/2/（也更新了第 2 版。）

HTML：

<div class="separator">
    <hr>
    <a href="#top">To Top</a>

</div>

CSS：

.separator {
    margin-top: 100px;
    text-align: right;
    position: relative;
}

.separator hr {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.separator a {
    position: absolute;
    right: 0px;
    top: 0px;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
}

在我的代码中，为了方便起见，我将所有内容都包装在一个带有 separator 类的 div 中。

.separator 将其位置设置为相对，以便更好地控制子元素。
hr 获取绝对位置，链接也是如此。这是为了能够将<a> 标记定位在<hr> 之上。
链接设置为right: 0，并带有一点填充，并在<hr> 的右侧和顶部结束。我相信这就是您想要实现的目标。

第 2 版：
根据 OP 的要求，我重新混合了上述代码，以便在没有 <hr> 标记的情况下工作。从语义上讲，<hr> 是有意义的，但 OP 的情况不允许使用它。

HTML：

<div class="separator_v2">
    <a href="#top">To Top</a>
</div>

CSS：

.separator_v2 {
    margin-top: 100px;
    text-align: right;
    border-top: 1px solid #000;
    overflow: visible;
}
.separator_v2 a {
    margin-top: -12px;
    display: block;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
    float: right;
}

使用负边距是这项工作的原因。尽管普遍认为，负边距不是黑客，它符合 W3C。

【讨论】：

你的解决方案和我的有什么区别？
奥斯瓦尔多，jsfiddle.net/oswaldoacauan/2BHYr/11 的小提琴手，你是说？看看结果。显然，它们完全不同。我的实际上使用了一个
标签并产生了正确的结果。
我也更新了我原来的想法。你可以看这里。 jsfiddle.net/2BHYr/17

【解决方案2】：

检查这个小提琴：

http://jsfiddle.net/53vD8/2/

它给出了一条人力资源线，然后是一个链接。

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
</body>

CSS

.layer
{
    margin-top:10px;
    margin-bottom:10px;
}

.line.simple
{
    width:90%; 
    height:0px; 
    display:block;
    position:relative;
    border-style:solid; 
    border-width:1px 0 0 0; 
    float:left;
    margin:15px 0 0px; 
}

.top_a
{ 
    padding-left:5px; 
    font:italic 12px/18px Georgia, sans-serif;
}

【讨论】：

OP 要求提供一个
但是这个解决方案被标记为解决它的那个？好笑……
@Patrik，我在一个框架内工作（twitter bootstrap），如果我把
放进去，事情就会变得有点麻烦。
username002，在这种情况下，您可以随时将
替换为 span 或其他内容。我会更新我的答案和那个版本的小提琴。

【解决方案3】：

为什么你需要一个 HR 标签？试试这个：将文本放在宽度为 100% 的 DIV 中，将顶部或底部边框设置为 1 实线并将文本向右对齐。

.hr-div {
  width: 100%;
  text-align: right;
  border-style: solid;
  border: 0px 0 1 0
}

<div class="hr-div">Top</div>

【讨论】：

这不会改变已经取得的成就。我的理解是“top”这个词应该与hr垂直对齐，而不是在它的上面或下面。