CSSでli(リスト)を均等幅や等間隔で横並びする方法

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

または、メニューは小さめのボタンでその間隔を等間隔にしたいということもあるでしょう。

CSSでli（リスト）を均等･等間隔で横並びする方法を説明します。

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

li(リスト)を均等幅で横並び

どのリストも同じ横幅、つまり均等幅で横並びさせる方法について2つ紹介します。

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

display:flexは子要素の位置調整ができるCSSです。これを使うとカンタンに横並びができます。

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

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

完成イメージ

• メニュー1
• メニューその2
• メニューパート3
• 長いメニュー長いメニュー長いメニュー

<style>
.yokonarabe1{
    /*コレ*/display:flex;
    /*コレ*/flex-wrap: nowrap;
    padding:0;
    list-style:none;
}
.yokonarabe1 li{
    /*コレ*/width:100%;
    padding: 10px;
    border:1px solid #999;
    background: #ffebb4;
}
</style>
<ul class="yokonarabe1">
    <li>メニュー1</li>
    <li>メニューその2</li>
    <li>メニューパート3</li>
    <li>長いメニュー長いメニュー長いメニュー</li>
</ul>

【条件1】display:flexの要素が改行不可

「flex-wrap: nowrap」を指定するとdisplay:flexの子要素は折り返されなくなります。（初期値につき未指定でも問題ありません。）

折り返しできないときは子要素のwidthに応じて自動で幅が決まります。

【条件2】子要素の幅がすべて統一指定

liに「width:100%」を指定しています。100%は重要ではなく同じ数値を指定することが重要です。

flexの子要素が折り返されないとき、子要素のwidthの割合で幅が決まります。

どれも幅が同じとき、その割合は「1:1:1:1:...」と同じになるため均等幅になるというわけです。

もちろん、liが4つなら「width:25%」、liが5つなら「width:20%」と指定してもいいのですが、このやり方で「width:100%」と指定するとliが増減してもwidthの値を変更しなくてもいいのでラクです。

【条件3】子要素の幅合計が親要素の幅を超える

厳密に言うと超えなくても同じ数値を指定すれば等間隔にはなります。

ただ、その場合横幅いっぱいのメニューにはなりません。

横幅いっぱいのメニューにしたい場合はliに「width:100%」を指定しましょう。

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

display:tableはhtmlのtableのように表にしてしまうCSSです。

その子要素にdisplay:table-cellを指定し、tdのようにすることができます。

ちなみに1行の横並びをするだけならtrは不要です。

ここではul liを使っていますが、通常のtableタグでも同じです。

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

display:flexと条件が違うので注意してください。

完成イメージ

• メニュー1
• メニューその2
• メニューパート3
• 長いメニュー長いメニュー長いメニュー

<style>
.yokonarabe2{
    /*コレ*/display:table;
    width:100%;
    padding:0;
}
.yokonarabe2 li{
    /*コレ*/display:table-cell;
    /*コレ*/width:1%;
    border:1px solid #999;
    padding: 10px;
    background: #ffebb4;
}
</style>
<ul class="yokonarabe2">
    <li>メニュー1</li>
    <li>メニューその2</li>
    <li>メニューパート3</li>
    <li>長いメニュー長いメニュー長いメニュー</li>
</ul>

【条件1】tdの幅がすべて統一指定

tdつまり「display:table-cellを指定したli」の幅を同じwidthにする必要があります。

tdの幅の合計がtableの幅に対して足りないとき、tdのwidthの割合で幅が決まります。

どれも幅が同じとき、その割合は「1:1:1:1:...」と同じになるため均等幅になるというわけです。

【条件2】tdの幅合計が親要素の幅未満

tdの幅の合計がtableの幅以上のとき、先頭のtdからwidthが優先されて決まってしまいます。

例えばtdすべてにwidth:100%を指定すると一つ目のtdが幅いっぱいになり、他のtdはつぶれてしまいます。

これを避けるために「tdの幅合計が親要素の幅未満」であることが条件となります。

tdに「width:1%」を指定しているのはそのためです。

li(リスト)を等間隔で横並び

リストとリストの間を同じ間隔、つまり等間隔で横並びさせる方法について紹介します。

【結論】display:flexとjustify-content:space-between

display:flexは子要素の位置調整ができるCSSです。これを使うとカンタンに横並びができます。

「justify-content」はdisplay:flexの子要素の横の位置を調整するCSSです。

「justify-content:space-between」は子要素を等間隔にするCSSです。

完成イメージ

• メニ
• メニュ
• メニュー
• メニュー1

<style>
.yokonarabe3{
    /*コレ*/display: flex;
    /*コレ*/justify-content:space-between;
    padding:0;
    list-style:none;
}
.yokonarabe3 li{
    border:1px solid #999;
    padding: 10px;
    background: #ffebb4;
}
</style>
<ul class="yokonarabe3">
    <li>メニ</li>
    <li>メニュ</li>
    <li>メニュー</li>
    <li>メニュー1</li>
</ul>

まとめ

li(リスト)を均等幅で横並び

1. display:flexを指定し、子要素をwidth:100%
2. display:tableを指定し、子要素をwidth:1%

li(リスト)を等間隔で横並び

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

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