マンガでわかるホームページ作成

CSSでli(リスト)を均等に横並びにする方法

メインメニューなどはli(リスト)が均等に横並びしているものです。しかし、liの中のテキスト量はバラバラで、うまく横幅が均等にならないこともあるかと思います。

ここではCSSでli(リスト)を均等に横並びにする方法を説明します。

liは何個でもOKとします。

結論

li自体を均等幅にして横並びにする方法

  1. display:flexを使う
  2. display:tableを使う

li間の隙間を均等にして横並びにする方法

display:flexとjustify-content:space-betweenを利用しましょう。

以下、詳しく説明します。

方法1.display:flexでliを均等に横並び

以下の条件をすべて満たすとき、自動で均等幅になります。

  1. display:flexの要素が改行不可
  2. 子要素の幅がすべて統一指定
  3. 子要素の幅合計が親要素の幅を超える

完成イメージ

  • テキスト
  • テキストテ
  • テキストテキ
  • テキストテキストテキストテキスト

html

<ul>
<li>テキスト</li>
<li>テキストテ</li>
<li>テキストテキ</li>
<li>テキストテキストテキストテキスト</li>
</ul>

CSS

ul{
display:flex;
}
li{
width:100%;
}

display:flexについて詳しくはこちら↓

方法2.display:tableでliを均等に横並び

以下の条件をすべて満たすとき、自動で均等幅になります。

  1. td の幅がすべて統一指定
  2. tdの幅合計が親要素の幅未満

display:flexと条件が違うので注意してください。
ここではul liを使っていますが、通常のtableタグでも同じ結果になります。

完成イメージ

  • テキスト
  • テキストテ
  • テキストテキ
  • テキストテキストテキストテキスト

html

<ul>
<li>テキスト</li>
<li>テキストテ</li>
<li>テキストテキ</li>
<li>テキストテキストテキストテキスト</li>
</ul>

CSS

ul{
display:table;
width:100%;
}
li{
display:table-cell;
width:1%;
}

方法3.liを均等な隙間で横並びにする

こちらは隙間を均等にしたい場合の方法です。

display:flexを指定したときにだけ使えるjustify-content:space-betweenを使います。

完成イメージ

  • テキ
  • テキス
  • テキスト
  • テキストテキスト

html

<ul>
<li>テキ</li>
<li>テキス</li>
<li>テキスト</li>
<li>テキストテキスト</li>
</ul>

CSS

ul{
display:flex;
width:100%;
justify-content:space-between;
}
/*必要に応じて*/
li{
width:100px;
}

まとめ

li自体を均等幅にして横並びにする方法

  1. display:flexを使う
  2. display:tableを使う

それぞれ条件が違うので気を付けましょう。

li間の隙間を均等にして横並びにする方法

display:flexとjustify-content:space-betweenを利用しましょう。

以上、CSSでli(リスト)を均等に横並びにする方法でした。

関連記事