横並びのリストについて
今回は横並びのリストについてです。
サイト作成の際には必須である<ul>タグ。
こちらを横並びにして表示することが多い思います。
しかし、並び方も複数あり、どれを使っていいかわからないから、
とりあえず「float」しておけばいいかと考えていませんか？
恥ずかしながら僕はそう考えてしまっていましたw
ズバリ横並びリストはこれだ！！
-
float: left;（right） を使う
-
display: inlineblock;を使う
float: left; を使う
■役割
- 文字を横に回り込ませる
- 要素を隣に並べる
■問題点
- 親要素の高さがなくなるため、デザインが崩れる
- 回り込んで欲しくない要素まで、回り込んでしまう
■解決策
- cssで親要素にclearfixを作成する
「clearfix」というclassがついている要素の擬似要素にclearをつけることで、レイアウトに影響を出さずに高さを出しています。
.clearfix:after {
content: “”; /* 擬似要素を実体化 */
clear: both; /* floatを解除する */
display: block; /* ブロック要素にする */
}
- 後の要素にclear:bothをセットする
display: inline-block;を使う
■役割
- 要素を中央ぞろえで隣に並べる
■使い方
- display: inline-block; ←子要素(li)に対して
- vertical-align: top; または vertical-align: bottom; ←子要素(li)に対して
- font-size: 0; ←親要素(ul)に対して
※ 2によって高さまたはボトムを揃える。
※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。
