CSS 要素を横一列に並べる方法
一覧ページによく使われる、divやliなどの要素を横一列に並べる方法を紹介します。
最もカンタン「flexbox」
サンプル
See the Pen
css layout horizontal – flexbox by Aquarium (@aquarium)
on CodePen.
HTML
<div class="item-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
CSS
.item-list{
display: flex;
}
.item-list .item{
box-sizing: border-box;
padding: 40px 80px;
}
特徴
- 親要素に指定。子要素全てに適用
用途
- 主に
divに使用 ul, liにも使用可。その場合はulに指定- 横幅いっぱいに要素を横並びにしたい時におすすめ
ボタンに使うなら「inline-block」
See the Pen
css layout horizontal – inline-block by Aquarium (@aquarium)
on CodePen.
HTML
<div class="item">Button</div>
<div class="item">Button</div>
<div class="item">Button</div>
CSS
.item{
display: inline-block;
box-sizing: border-box;
padding: 10px 40px;
}
特徴
- 指定要素のみに指定し、適用される
- ソースコードの改行で要素の左右に隙間ができることがあります
用途
- ボタンや画像など、文章内の要素を改行せずに横一列にしたい時におすすめ
