コード

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

この記事の目次

サンプル

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

コード


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

.box {
  overflow: hidden;
}
ul {
  margin: 0 -10px;
  font-size: 0;
}
li {
  display: inline-block;
  box-sizing: border-box;
  width: 33.33333333%;
  padding: 10px;
  font-size: 14px;
  vertical-align: top;
}

補足

本記事ではリスト要素の幅はリキッド(可変)のため、レスポンシブデザインやスマホサイトなどに採用することが多いと思う。ちなみに、列数に応じて、リスト要素の幅は以下を参考に適宜調整する必要がある。

列数
1列 100%
2列 50%
3列 33.33333333%
4列 25%
5列 20%
6列 16.66666667%