2

CSSで、メニューの項目数が不定の時に一つ一つの項目の長さが統一されている横並びメニューをulliを用いた方法で実装したいです。
メニューの項目数が固定ならば項目の長さを統一できるのですが、不定の時にどう実装すればいいかがわかりません。
HTMLは次のような形です。

<div class="menu">
 <ul>
  <li><a href="/profile">Profile</a>
  <li><a href="/new">New</a>
 </ul>
</div>
1
  • 質問の意味が理解できないのですが、これは、横並びのメニューを作るときに、メニューが2個なら50%ずつ等分、3個なら33.3..%ずつ等分、みたいなことをやりたいという意味でしょうか?
    – madapaja
    Commented 2014年12月19日 2:45

3 件の回答 3

5

ハックではない方法を提示しておきます。

目的のレイアウトは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 を使うようにしてください。

2
  • 1
    +1 最近のブラウザーしかサポートしなくてもいい場合は、見事なソリューションだと思います。 Commented 2014年12月19日 4:54
  • 1
    ちょっと古めの組み込みブラウザも対象にする場合は-webkit-などを付けると良さそうですね。
    – user4367
    Commented 2014年12月19日 9:48
1

jqueryのライブラリ使ったら、幅が均等になっていい感じのメニューが作れます。
ドロップダウンメニュー

1

ちょっとハックっぽいですけど、以下の方法はいかがでしょうか?

display: tabletable-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>

3
  • liwidth: 1%; は不要ではないですか? Chrome, Firefox, IE8~11 ではなくても平気なはずです。
    – keik
    Commented 2014年12月19日 4:18
  • 1
    @keik 幅の設定なしで、古いIEバージョンで問題になったと覚えているようです。 Commented 2014年12月19日 4:34
  • 1
    そうなんですね、失礼しました。IE7以前は考慮しておりませんでした (確認しようにももう手元に環境がありませんでした……)。
    – keik
    Commented 2014年12月19日 4:37

この質問に回答するには、ログインする必要があります。