floatの使い方

初めに

  • Progateの初級編を一通り終えて、道場編にトライしている時、躓いた部分を自分なりに解説をし、備忘録として残すためこの記事を書きます。

floatとは何か？

  • 縦に並んでいる要素を横並びするプロパティ

具体例

HTML
 <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
プレビュー

目標物

  • プログラミングとは、学べるレッスン、お問い合わせを縦並びから、横並びに変える
CSS
.header-list li{
  float:left ;
  padding: 33px 20px;
}

  • li要素全てを横並びにしたいのでheader-list liのプロパティにfloat-leftを記載してそれぞれを横並びにする。

  • もし右に付けにして並べたい場合はfloat-rightを使用する

結語

  • 縦に並んでいる要素を横に表示させたいときに、その要素１つ１つにfloatを追加する

　* 今回は横に並べたい要素３つがli要素なのでli要素のみにfloatを入れれば良い

  • 左に並べたければ、float:left;、右に並べたければfloat:right;を使用する