今回は横並びのリストについてです。

サイト作成の際には必須である<ul>タグ。

こちらを横並びにして表示することが多い思います。

しかし、並び方も複数あり、どれを使っていいかわからないから、

とりあえず「float」しておけばいいかと考えていませんか？

恥ずかしながら僕はそう考えてしまっていましたw

ズバリ横並びリストはこれだ！！

• float: left;（right） を使う

• display: inlineblock;を使う

---

float: left; を使う

■役割

• 文字を横に回り込ませる
• 要素を隣に並べる

■問題点

• 親要素の高さがなくなるため、デザインが崩れる
• 回り込んで欲しくない要素まで、回り込んでしまう

■解決策

• cssで親要素にclearfixを作成する

「clearfix」というclassがついている要素の擬似要素にclearをつけることで、レイアウトに影響を出さずに高さを出しています。

.clearfix:after {

 content: “”;         /* 擬似要素を実体化 */

 clear: both;        /* floatを解除する */

• 後の要素にclear:bothをセットする

---

display: inline-block;を使う

■役割

• 要素を中央ぞろえで隣に並べる

■使い方

1. display: inline-block; ←子要素(li)に対して
2. vertical-align: top; または vertical-align: bottom; ←子要素(li)に対して
3. font-size: 0; ←親要素(ul)に対して
   ※ 2によって高さまたはボトムを揃える。
   ※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。