3

我试图在 hr 标签的末尾添加一些文本，但到目前为止，我还没有设法让它按应有的方式工作。

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

编辑：

我想要的是：

__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _Top

4

3 回答 3

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>标签的情况下工作。从语义上讲，使用 a 是有意义的<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 标准。

于 2012-05-03T12:04:44.697 回答
1

检查这个小提琴：

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;
}
于 2012-05-03T12:41:27.927 回答
0

为什么你需要一个 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>
于 2012-05-03T11:57:20.210 回答