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

質問

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

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

回答No.3

SAYKA

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

お礼

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

回答No.2

goldfox

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

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

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

お礼

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

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

回答No.1

noname#56882

{text-align: right; }とすることで、テキストは右寄せになりますが
CSSでアイコンを表示されているのでしたら、その部分をアップしていただければ
アドバイスしやすいと思いますよ。

お礼

多少修正をかけまして、
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をかけると大丈夫なようです。
------------------------------------------

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

補足

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