1

ここにデモンストレーションがあります: http://jsbin.com/egezog/edit#html,live

これが初心者の場合は申し訳ありませんが、これを理解できません。タイトルがあり、（装飾目的で）その端からページの右側に向かう行が必要です（実際のページではなくラッパーですが、とにかくオーバーフローが隠されています）。ラッパーの幅は固定されていますが、タイトルの長さは異なります。私は絶対位置を使用できません。また、テーブルも使用したくありません。そして、これを整理すると...

ここ: http://jsbin.com/ibeciv/edit#html,live。結局のところ、私は実際にこれをすべて適切に調整することを好みます。実装されているのに、なぜアドバイスが必要なのですか？ご覧のとおり、タイトルが 2 行になっていますが、これは私の状況では受け入れられません。また、表を使用しないことを好みます。

float:right を使用して右揃えにできると思いますが、実装によって異なりますので、アドバイスをお願いします。ありがとう！

PS: jsfiddle は現在ダウンしているため、ここでは jsbin を使用しました。

4

3 に答える 3

2

http://jsbin.com/ujiquq/edit#html,live

IE8 および最新のすべてのブラウザーで動作します。親要素の背景は何でもかまいません。何font-sizeを選択しても、行は垂直方向の中央に配置されます。

HTML:

<h3><span>The title</span></h3>

CSS:

h3:after {
    content: '\00200B';
    background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
    display: block;
    overflow: hidden;
}
h3 > span {
    float: right;
    padding-left: 5px;
}
于 2012-06-29T11:59:28.833 に答える
1

次のように書きます。

HTML

<div class="title"><span>Title Here</span></div>

CSS

.title {text-align:right;border-bottom:1px solid red;}
  span{background:#fff;float:right;margin-top:-9px;}

これをチェックしてくださいhttp://jsbin.com/ibeciv/3/edit

更新しました

これをチェックしてくださいhttp://jsbin.com/ibeciv/4/edit

于 2012-06-29T11:24:40.860 に答える
1

テーブルを使用しないソリューションは次のとおりです。

http://jsbin.com/ujawej/5/edit

そして、これがテーブルのあるものです（私のコメントから）：

http://jsbin.com/osovev/2

于 2012-06-29T11:26:24.993 に答える