Question

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

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

编辑：

我想要的是：

的的 __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _Top

Answer 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将其位置设置为relative，以便更好地控制子元素。
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标准。

Answer 2

检查这个小提琴：

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

它给出一个HR行，然后是一个链接。

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

Answer 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>

如何在hr标签中添加一些文字？

3 个答案: