スタイルシート（CSS）で左にアイコンが付いたテキストの右寄せ

※同じ内容で投稿しましたが説明不足だったので再投稿しています。

テキストの左にスタイルシートで背景を敷いてアイコンを表示させています。
そのアイコンごとテキストを右寄せにするにはどうしたらよいのでしょうか。
よろしくお願いいたします。

No.3 回答者： SAYKA 回答日時： 2008/01/22 15:32

http://www.tohoho-web.com/css/reference.htm#cont …
こっちのcssで手前に付けて、後はtext-alginで。

この回答へのお礼

ご回答ありがとうございました。
とてもシンプルで理想的なやり方なように思いますが
現時点ではIEに対応していないみたいですね。。

お礼日時：2008/01/22 16:17

No.2 回答者： goldfox 回答日時： 2008/01/22 15:09

背景は背景で位置指定するしか無いと思います。

当たり前ですが、テキストと背景別々に指定するのですから、どのブラウザでもテキストの左端に背景画像が来るとは限りません。

「背景画像の表示位置を指定」
http://www.tagindex.com/stylesheet/page/backgrou …

どうしてもテキストの左にアイコンをおきたいなら、<img>で配置することです。

この回答へのお礼

ご回答ありがとうございます。
コンテンツエリアの幅が数パターンで変動するため
positonでの指定は難しいかもしれません。
また、ページ数が多いサイトでの共通パーツになるため、
<img>を直に置くのは避けたいと思っています。

現在、floatとcleaFixを使った方法で検証中ですので
結果が分かりましたらこちらに記載いたします。

お礼日時：2008/01/22 15:40

No.1 回答者： NymphLuna 回答日時： 2008/01/22 14:36

{text-align: right; }とすることで、テキストは右寄せになりますが

CSSでアイコンを表示されているのでしたら、その部分をアップしていただければ
アドバイスしやすいと思いますよ。

この回答への補足

ご回答ありがとうございます。
背景で指定しているアイコン部分はこんな感じです。
a.arrow01{
display: block;
background: url(/common/images/icon_arrow.gif) 0 4px no-repeat;
padding-left: 10px;
}

補足日時：2008/01/22 15:41

この回答へのお礼

多少修正をかけまして、
p.arrow01{
text-align: right;
}
p.arrow01 a{
background: url(/common/images/icon_arrow.gif) 0 4px no-repeat;
padding-left: 10px;
}
ブロック要素をはずしたら大丈夫みたいです。

------------------------------------------
■goldfoxさま＞＞
goo初心者のためご連絡の場所が違ってしまい申し訳ありません。
ブロック要素のままいく場合は
p.xxx a.arrow01{
display: block;
background: url(/common/images/icon_arrow.gif) 0 4px no-repeat;
padding-left: 10px;
}
p.xxx{
float: right;
}
としておいて、
p.xxx:after{...}
などでclearFixをかけると大丈夫なようです。
------------------------------------------

長文失礼いたしました。
みなさまありがとうございました！

お礼日時：2008/01/22 16:15