More than 3 years have passed since last update.

要素を横並びにする

Last updated at 2020-08-08Posted at 2020-08-08

HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSでの指定が必要です。

#floatプロパティ
floatプロパティを用いることで、指定した要素を横並びにすることができます。
float: left;を指定すると要素が左から順に横に並びます。
float: right;を指定すると要素が右から順に横に並びます。

index.html

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

style.css

li {
  float: left;
}