コード

横並びのリストを作る場合、一般的にはfloat: left;を使う人が多いが、clearfixとかoverflow: hidden;などの回り込み解除の設定が必要なため、状況によってはコードが少し複雑になるケースがあるので、自分は今回紹介するdisplay: inline-block;を使った手法を採用している。この手法だと、各リスト要素の高さが異なる場合でも、カラム落ちしたりといった不具合もない。

この記事の目次

サンプル

See the Pen floatを使わない横並びリスト (幅固定ver.) by Tora (@webtoranomaki) on CodePen.

コード


<div class="box">
  <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>
</div>

.box {
  width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
ul {
  width: 660px;
  margin: 0 -10px;
  font-size: 0;
}
li {
  display: inline-block;
  width: 200px;
  margin: 10px;
  font-size: 14px;
  vertical-align: top;
}

補足

本記事ではリスト要素の幅は200pxと固定幅だったが、これが25%などのリキッドなタイプで、リスト要素間の隙間を作りたい場合はmarginではなくpaddingを使う。