CSSで、メニューの項目数が不定の時に一つ一つの項目の長さが統一されている横並びメニューをul
とli
を用いた方法で実装したいです。
メニューの項目数が固定ならば項目の長さを統一できるのですが、不定の時にどう実装すればいいかがわかりません。
HTMLは次のような形です。
<div class="menu">
<ul>
<li><a href="/profile">Profile</a>
<li><a href="/new">New</a>
</ul>
</div>
CSSで、メニューの項目数が不定の時に一つ一つの項目の長さが統一されている横並びメニューをul
とli
を用いた方法で実装したいです。
メニューの項目数が固定ならば項目の長さを統一できるのですが、不定の時にどう実装すればいいかがわかりません。
HTMLは次のような形です。
<div class="menu">
<ul>
<li><a href="/profile">Profile</a>
<li><a href="/new">New</a>
</ul>
</div>
ハックではない方法を提示しておきます。
目的のレイアウトはCSS3の Flexbox を使うことで、以下の様に実現できます。
.menu ul {
display: flex;
flex-flow: row wrap;
/* 以下はデフォルトのulの効果を打ち消すためのもので、本質ではない */
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul > li {
display: inline-block;
flex: 1;
/* 以下は見た目をわかりやすくするためのもので、本質ではない */
border: 1px dashed orange;
}
<div class="menu">
<ul>
<li><a href="/profile">Profile</a></li>
<li><a href="/new">New</a></li>
<li><a href="/new">Very very long item</a></li>
</ul>
</div>
Flexbox 自体の説明は css3 flex で検索 すれば多くのページが見つかると思いますが、 MDN の CSS flexible box の利用 あたりがもっとも詳しく正確だと言えます。
是非正しい CSS を使うようにしてください。
ちょっとハックっぽいですけど、以下の方法はいかがでしょうか?
display: table
とtable-layout: fixed
を使って、表のセルの幅を1%
にすると、ブラウザーが全てのセルを同じ長さでレンダリングするようになります。
div {
display: inline-block;
}
ul {
display: table;
table-layout: fixed;
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
}
li {
display: table-cell;
border: 1px dashed orange;
width: 1%;
}
<div class="menu">
<ul>
<li><a href="/profile">Profile</a>
</li>
<li><a href="/new">New</a>
</li>
<li><a href="/new">Very very long item</a>
</li>
</ul>
</div>
li
に width: 1%;
は不要ではないですか? Chrome, Firefox, IE8~11 ではなくても平気なはずです。