＃14でのハマってるその１が解決しました
進度
mainの画像付きリストが横並びにならない件解決
メモ
幅の問題
liの横幅が広すぎました。
親要素のスタイル
#contants{
float: left;
width: 400px;
height: auto;
}
liのスタイル
ul.products{
margin-bottom: 14px;
text-align: center;
}
ul.products>li{
fliat: left;
width: 400px; /* ←ここ */
display: inline-block;
}
つまり、幅が広すぎたのです。これを100pxにしたら無事横並びになりました。
- なぜ
400pxにしていたのか-
li全体の幅と勘違いしていたから。
-
- なぜ判明したか
-
borderで領域がどうなっているか確認しました。同じようなミスが実は度々あって、その場合領域がどうなっているか確認するために枠線を付けてみるのです。そうすると今回のような勘違いに気づけます。
-
長々ハマってしまいましたが、ようやく先へ進めそうです。
一応修正したソースを貼っておきます。