CSS 要素を横並びにする方法&パターン3選
一覧ページによく使われる、div
やli
などのボックス要素を横一列に並べる方法と横並びパターンを3つ紹介します。
flexboxで横一列に並べる
サンプル
HTML
CSS
特徴
- 親要素に指定。子要素全てに適用
用途
- 主に
div
に使用 ul, li
にも使用可。その場合はul
に指定- 横幅いっぱいに要素を横並びにしたい時におすすめ
display: inline-blockでボタンを並べる
サンプル
HTML
CSS
特徴
- 要素に適用
用途
- ボタンを並べる時に使用
- 文章の横にボタンを並べる時に使用
画像+テキストあり横並び
画像とテキストが入った要素を横並びに表示。
HTML
CSS
画像+テキスト+背景あり横並び
背景のある画像とテキストが入った要素を横並びに表示。
HTML
CSS
画像+テキスト+ボタンあり横並び
背景のある画像とテキストとボタンが入った要素を横並びに表示。