インターネット上のサンプルを参考に下記ソース(画像が横一列に並ぶ)を試してみたのですが CSSファイルの 「#list li」の部分の意味がいまいちよくわからないので教えてください。 下記の1又は2の解釈のどちらが正しいのでしょうか。 １．「id="list"」 又は 「li」タグに対して適用する(下記リンクの質問の回答に従えばこちらの解釈？) http://okwave.jp/qa/q8040531.html ２．「id="list"」の要素の配下の「li」タグに適用する 【サンプルのCSS】 #list li { margin:20px; height:140px; list-style-type:none; float:left; } 【サンプルのHTML】 <ul id="list"> <li><img src="./img/Desert.jpg"></li> <li><img src="./img/Koala.jpg"></li> <li><img src="./img/Tulips.jpg"></li> <li><img src="./img/Penguins.jpg"></li> </ul> 1．の解釈で正しければ #list { margin:20px; height:140px; list-style-type:none; float:left; } 「#list li」 → 「#list」 と変更してもレイアウトに変更はないと思いましたがこれでは横に並んでいた画像が 縦に並ぶようになってしまいました。 2．の解釈が正しければ下記のようCSSファイル内に「#list」を追加して記述しても 「#list li 」が適用されて追加前と比べてもレイアウトに変更はないと思ったのですが 微妙に「#list」の影響を受け（float:right;としているせいか画像が少し右寄りに表示された）ました。 「#list li 」という記述は１と２のどちらの意味になるのでしょうか。 #list { margin:20px; height:140px; list-style-type:none; float:right; } #list li { margin:20px; height:140px; list-style-type:none; float:left; }
↧