ul li を inlineにすると、右から順にリスト表示されます

いつもお世話になっております。
基本的なことかもしれませんが、解決できずに困っているので
どなたかアドバイスを頂けませんでしょうか。

希望はA,B,Cを左から順に並べて表示させたいのですが、
現在C,B,A　となってしまっています。
(希望： A B C 現在： C B A)

---- html ----
<div class="link">
<ul>
<li><img src="A.gif"></li>
<li><img src="B.gif"></li>
<li><img src="C.gif"></li>
</ul>
</div>

---- css ----
.link ul, li {
display: inline;
float: right;
}

これ以降、他の個所（別のclassなど）でul記述しても
全て同様の現象が起きております。
何が原因と考えられますでしょうか？

No.2 回答者： dezimac 回答日時： 2009/01/26 17:27

『float: right;』が原因です。

display:inline;にしたらfloatは不要です。
floatは画像やBlock要素を左右に寄せて回り込みをさせる為に使います。

参考URL：http://www.htmq.com/style/index.shtml

この回答へのお礼

迅速なご回答誠にありがとうございます！！
無事解決いたしました。

おかげさまで知識がまた一つ増えました<(_ _)>

お礼日時：2009/01/26 18:11

No.1 ベストアンサー 回答者： yambejp 回答日時： 2009/01/26 17:22

liを右寄せしているからですね

右寄せしたいするのはulでliは左から順に処理をいれないと・・・

<style>
.link ul{
float: right;
list-style:none;
}
.link ul li {
display: inline;
float: left;
}
</style>
<div class="link">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

この回答へのお礼

迅速なご回答誠にありがとうございます！！！
即座に解決いたしました。

独学なので曖昧に理解しているところが多いみたいです（泣

お礼日時：2009/01/26 18:10