右寄せ時の背景画像

質問

cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか？

<p class="hoge">ここに右寄せのテキストが入ります。</p>
.hoge {
margin-top: 5px;
font-size: 80%;
color: #888;
text-align: right;
background: url(../img/common/hoge.png) no-repeat 420px 1px;
}

420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。

ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更
できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい
不格好になってしまいます。

解決方法としてどのような方法がありますでしょうか？

回答No.1

syagain · ベストアンサー

[text-align:right]を[float:right]でやってみてはいかがでしょうか。
それだと背景画像の位置をわざわざ指定しなくとも、
背景も文字と一緒に右端に寄ると思います。
また背景の位置を指定しなければ、
自動で文字の大きさに合わせた背景が表示されると思います。

他の手段としては、テーブルでも同じようにできると思います。
テーブルだと、文字が大きくなれば、当然セルも大きくなり、
テーブルの背景画像も映る範囲が大きくなります。
文字も画像も左上が基準となるので位置も揃いやすいと思います。

<table class="hoge"><tr><td>ここに右寄せのテキストが入ります。</td></tr></table>
.hoge {
margin-top: 5px;
font-size: 80%;
color: #888;
float:right;
background: url(../img/common/hoge.png) no-repeat;
}

　ブラウザにもよると思いますが、safari/firefoxでは、
　多分、ご希望の通りにできたかな？と思います。

参考URL：

http://bowz.info/781

回答No.3

noname#100277

背景画像なのだから、文字には表示に影響無い筈ですが・・・
若しどうしてもするなら親要素に背景画像をCSSで、子要素（インライン）として、背景画像以外のCSSを適応すれば良いのでは？

回答No.2

Yama-tani

420pxの変わりに、rightとしてみて下さい