【CSS】li要素を横並びにする主な方法

はじめに

サイト模写を行っていた時に、li要素を横並びにする方法がわからなかったのでまとめました。
今回紹介する以外にも横並びにする方法はありますが、今回は私が調べて使ってみた方法について書いています。

li要素を横並びにする主な方法

• float: left;
• inline-block化

float: left;

li要素をfloat:leftで横並びにする

li{
  float: left;
}

このとき、li要素が浮くのでulにclearfixをする

<ul class="sample clearfix">
  <li>hoge</li>
  <li>hoge</li>
</ul>

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

inline-block化

li要素をinline-block化する

li{
  display: inline-block;
}

このときli要素同士に余白ができるのでulでfont-size:0;
liでfont-sizeを指定する

ul{
  font-size: 0;
}
li{
  font-size: 13px;
}

おまけ：displayとは

CSSのプロパティであり、要素の表示形式を決める

displayには主に4種類ある

• block: 要素が横いっぱいに広がり、縦に並ぶ
• inline: 要素が平べったく横に並ぶ
• inline-block: 並びはinline,中身はblock
• none: 非表示

それぞれの特徴について(noneを除く)

	block	inline	inline-block
改行と並び	前後に改行が入る	横に並ぶ	横に並ぶ
幅・高さの指定	幅と高さが指定できる	幅と高さが指定できない	幅と高さが指定できる
余白の指定	margin,paddingが指定できる	左右のmargin,paddingが指定できる	margin,paddingが指定できる
text-align	指定できない	指定できる	指定できる
vertical-align	指定できない	指定できる	指定できる

さいごに

clearfixとクラスを指定するだけでよいのでfloat:left;のほうが使い勝手がよいと思った。
displayプロパティについても知ることができたので勉強になった。

参考