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.1

yambejp · ベストアンサー

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>

お礼

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

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

回答No.2

dezimac

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

参考URL：

http://www.htmq.com/style/index.shtml

お礼

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

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