要素の横並び配置

要素の横並び配置
Image by 5311692 from Pixabay

2020.12.06（更新日：2021.03.22）

CSSで親要素の直下の子要素を横並び配置する方法はいくつかあるが、昨今flexbox頼りになっているので忘れ気味。
備忘録として、基本的なものをまとめてみる。

この記事は１年以上経過しています。内容的に古い場合があります。

float

今更ながらだけど、たまに使用するので。横並びにしたい要素に指定すればOK。

<!-- HTML例 -->
<div class="wrapper">
  <div class="leftbox">左のボックス</div>
  <div class="rightbox">右のボックス</div>
</div>
/* CSS */
.leftbox {
  float: left;
  width: 48%; //ここは適宜設定
}
.rightbox {
  float: right;
  width: 48%; //ここは適宜設定
}

ここで忘れてはいけないのが「回り込み解除」。clearを最後の横並び要素の次に指定するのだけど、そのためのどーでもいい要素を作るのはしたくないので以下を使う。

/* clearfixをwrapperのclassに追加 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* 面倒ならwrapper自体に */
.wrapper::after {
  content: "";
  display: block;
  clear: both;
}

/* もしくはwrapper自体にoverflow */
.wrapper { overflow: hidden; }

clearfixの場合どちらでも反映されるが、clearfixを単体で設定しておくと使い回し出来る。
また注意点としてoverflowはシンプルだが、親（wrapper）からはみ出たものは表示されなくなる。（box-shadowとかよくある話）

inline / inline-block

文字の様にダランと横並びにしたい時。横並びにしたい要素に指定すればOK。
リストなどで使うことが多いかもしれないのでリストの例。

<!-- HTML例 -->
<ul>
  <li>１要素</li>
  <li>２要素</li>
  <li>３要素</li>
</ul>
/* inline */
li { display: inline; }
/* もしくはinline-block */
li { display: inline-block; }

２つの違いは「親要素の範囲を超えた時、文字要素の場合li内で改行されるか否か」。
使用頻度はinline-blockの方が多いかも。

横並びした要素間に隙間が生じる

この方法だと改行分？の隙間が生じる。ピタッとはくっつかないので以下を使用。
(ただし</li>で改行せず、続けて記述する場合は、隙間は生じないので不要）

/* 親要素のテキストの水平方向の字間のスペースを詰めて */
ul {
  letter-spacing: -0.4em;
}
/* 子要素のテキストの水平方向の字間のスペースを戻す */
li { 
  display: inline-block; 
  letter-spacing: normal;
}

display:table

テーブルタグの形にして横並びにする。HTML例は上のinlineを参考に。

/* 親要素をテーブル化 */
ul {
  display: table;
  table-layout: fixed; //ie,edge対策。セルを均等化してくれる
  width: 100%; //幅を指定したい場合
}
/* 子要素をセル化 */
li { 
  display: table-cell; 
  vertical-align: middle; //お好みでtop,middle,bottom選択
}

扱い的にはテーブルタグを理解していれば問題なし。inlineの様に親要素の範囲を超えても流れていかない。