如何向hr标签添加一些文本？ [英] How to add some text to a hr tag?

问题描述

我想在一个hr标签结束时有一些文本，到目前为止我还没有设法使它工作，因为它应该。

我是期望有一行---------------------顶部有一些文本朝向结束。

你可以看到我的小提琴这里 http://jsfiddle.net/2BHYr/

编辑：

我想要的是：

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

解决方案我明白你想要什么。这里是小提琴：

http://jsfiddle.net/fMJm2/2/

HTML：

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

CSS：

 code> .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将它的位置设置为relative


• hr获取位置绝对路径，链接也是如此。这是为了能够将< a> 标签放置在< hr> 之上。


• 链接设置为 right：0 ，带有一点填充，最后右侧， code>< hr> 。

版本2：
根据OP的要求，我已经重新混合上面的代码工作没有一个< hr> 标签。从语义上讲，使用< hr> 是有意义的，但是OP的情况不允许使用它。

HTML：

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

CSS：

 code> .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标准。

I am trying to have some text towards the end of a hr tag and so far I haven't managed to get it working as it should.

I am expecting to have a line --------------------- top with some text towards the end.
You can see my fiddle here http://jsfiddle.net/2BHYr/

Edit:

What i want is:

__________________________Top

解决方案

I believe I have understood what it is you want. Here is the fiddle:
http://jsfiddle.net/fMJm2/2/ (Updated with Version 2 as well.)

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

In my code, I have wrapped everything in a div with class separator for ease.

• .separator gets it's position set to relative in order for more control over the child elements.
• hr gets position absolute and so does the link. This is in order to be able to position the <a> tag on top of the <hr>.
• The link is set to right: 0 with a bit of padding, and ends up to the right and on top of the <hr>. I believe this is what you want to achieve.

Version 2:
Per OP's request, I've re-mixed the above code to work without a <hr> tag. Semantically it would make sense with a <hr>, but OP's circumstances does not allow for it to be used.

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

The use of negative margin is what makes this work. Despite popular belief, negative margin is not a hack, it's W3C compliant.

这篇关于如何向hr标签添加一些文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！