3

hr タグの末尾にテキストを挿入しようとしていますが、これまでのところ、正常に機能させることができていません。

---------------------- top という行があり、最後にいくつかのテキストがあることを期待しています。
ここで私のフィドルを見ることができますhttp://jsfiddle.net/2BHYr/

編集：

私が欲しいのは：

__ _ __ _ __ _ _ __ _ __ _ _ __ _ _ _トップ_

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 に答える