1

ページのタイトルがあります。テキストの後に始まり、行の終わりまで続く行が必要です。ウィンドウの幅に関係なく、次のようなものがあります。

TITLE----------------------------------------------------------------------------

-しかし、フルラインで、私はデモンストレーションのためにそれを書いただけです。私は見まし<hr>たが、それは常に後の行に行きます、それはテキストの後にとどまりません。私もこの投稿を見ましたが、それは私が望んでいることではありません。

ありがとう！

4

6 に答える 6

3

わかりました、ここに別の答えがあります。代わりにフィールドセット要素を使用できます

  <fieldset>
  <legend>Title comes here</legend>
  </fieldset>

これをスタイリングします

fieldset { border-top:1px solid #333; }

ここにデモがあります：http：//jsfiddle.net/SQujE/

于 2012-05-23T17:57:51.487 に答える
2

2つのDIV要素を試してください。最初のものは100％のページ幅にすることができ、2番目のものを含めることができます。

内側のDIVに「タイトル」テキストを含め、それ自体を自動サイズ設定します。外側のdivの背景を線の画像にし、内側のdivの背景を通常のページの背景と同じ色にします。

于 2012-05-23T17:36:19.527 に答える
2

hr要素の場合、CSSプロパティの表示を幅とともにinline-blockの値で使用できます。

hr { display: inline-block; width: 90%; }

そしてあなたのHTMLでは、

Title<hr />

デモ： http： //jsfiddle.net/67f2E/

「タイトル」という単語とhr要素を中央に垂直に並べた小さなバリエーション：http： //jsfiddle.net/wHPQA/

于 2012-05-23T17:38:15.193 に答える
1

これを試して ：

Title<hr style="display: inline-block; width: 90%; margin-bottom: 4px; margin-left: 5px;" />

saganbyteの回答に基づいています。下と左からmargin-bottomのオフセットで遊んでください。margin-leftロジックは違いますか？

于 2012-05-23T17:44:01.247 に答える
1

私の答えは少し遅れていることは知っていますが、あなたが望むことをするのは長かったです。

HTML： <span id="test" >HI</span>

JS：

document.getElementById("test").style.position="relative";
var line=document.createElement("div");
line.setAttribute("style","width:"+(document.getElementsByTagName("html")[0].offsetWidth-document.getElementById("test").offsetWidth-1)+"px;height:1px;position:absolute;top:6px;left:"+(document.getElementById("test").offsetWidth+1)+"px;background-color:black;");
document.getElementById("test").appendChild(line);

フィドル： http： //jsfiddle.net/QrEgH

ボーナス：
1-CSSはなく、JSの小さなブロックです。
2-非常に小さいHTMLで、スパンを追加するだけです。
3-圧縮率が低くコメント付きのこのフィドル：http：//jsfiddle.net/VfCJ3

于 2012-05-23T20:21:14.707 に答える
1

この質問は古いかもしれませんが、私は今日この効果が必要であり、絶対に配置されたCSS疑似要素を使用してそれを達成しました。まず、HTMLの要素のテキストの周りにラッパーを配置します。

    <h3>
        <span>Title</span>
    </h3>

このスパンを使用して、テキストと重なる線の部分（疑似要素）を覆います。これにより、テキストの終わりから行の終わりまでの行の効果が得られますが、実際には、行は常にコンテナの100％の幅になります。

    h3 {
      /* we will absolutely position the line relative to the parent element (h3) */
      position: relative;
      z-index: 1;
    }
    h3 span {
      background: #dedede;   /* make this the same color as the page background! */
      padding-right: 0.5em;  /* this will be the 'margin' from the text to the line */
    }
    /* Add Line After Text*/
    h3 span::after {
      content: '';
      width: 100%;
      height: 2px;
      background: #919098;
      /* position the line within the parent element */
      position: absolute;
      bottom: 0.5em;                           /* half the height of the text from the bottom */
      left: 50%; transform: translateX(-50%);  /* horizontally center it */
      z-index: -1;                             /* display it behind the parent */
    }

この方法の結果

これは見出し要素を使用して行いましたが、タグを入れ替えることで、段落やその他の要素にこの効果を簡単に使用できます。頑張ってください！

于 2021-09-23T15:49:57.007 に答える