HTML,CSS勉強メモ #13 〜画像付きリストが横にならずにハマる〜

前回からずっとハマっています・・・

進度##

mainの画像付きリストを横並びにしたい

レッスン内では画像付きリストは縦に並べ、説明をその横に付ける形になっているが、 これを画像を横並びにして、説明をその下に付けたい。

メモ##

ハマってるその１

とりあえず`li`に`float;left;`をつけてみたけど、横並びにならない。

ハマってるその２

`css`を最初から見直し、`width`を％で指定しているところをPXに直す。

• そもそもなぜ％で指定したのか
• 伸縮させてもmain-containerの中央配置を維持させようとしたからです。
  最初PXで指定したところ、伸縮に合わせてついてきてしまったので％で指定していました。
• 上記の改善

main-conteiner{position: absolute;             
               top:0;
               bottom:0;
               right:0;
               left:0;
               margin: auto;
}

これで常に中央配置を保てる技を見つけました。

• menuの幅を％からPXにしたところ、中央配置が崩れた。
• 今ここです。

ひとまず頭の中整理させるために一度メモっときます。
＊ちなみに書きながら最初の画像付きリストについて、もしかしてliにfloatつけたのがいけなかったのでは？と思い、試しにli>imgに付けてみたところ効きました。
しかしレイアウトはだだ崩れなのでmenuの問題が解決したら考えてみようと思います。
結局widthの指定の仕方は関係なかったってことですね・・・