横並びのリストについて

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

サイト作成の際には必須である<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;を使う

■役割

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

■使い方

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