2098


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

[code]

    <div class="menu">
     <ul>
      <li><a href="/profile">Profile</a>
      <li><a href="/new">New</a>
     </ul>
    </div>
    
[/code]


CC BY-SA 3.0
2014-12-19T02:40:47.043
2082
2014-12-19T04:46:32.593
question
css
CSSで個数が不定のときに個々の長さが同じ横並びメニューを実装したい


jqueryのライブラリ使ったら、幅が均等になっていい感じのメニューが作れます。  
[ドロップダウンメニュー](http://shanabrian.com/web/jquery/dropdown.php)


CC BY-SA 3.0
2014-12-19T02:50:49.150
2083
2014-12-19T02:50:49.150
2329
2082
answer


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

`display: table`と`table-layout:
fixed`を使って、表のセルの幅を`1%`にすると、ブラウザーが全てのセルを同じ長さでレンダリングするようになります。

[code]

    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%;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2014-12-19T03:00:36.283
2085
2014-12-19T03:09:14.733
2014-12-19T03:09:14.733
3371
3371
2082
answer


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

目的のレイアウトはCSS3の [Flexbox](http://caniuse.com/#search=flexbox)
を使うことで、以下の様に実現できます。

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]

Flexbox 自体の説明は [css3 flex
で検索](https://www.google.co.jp/webhp?ie=UTF-8#q=css3%20flex)
すれば多くのページが見つかると思いますが、 MDN の [CSS flexible box
の利用](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes)
あたりがもっとも詳しく正確だと言えます。

是非正しい CSS を使うようにしてください。


CC BY-SA 3.0
2014-12-19T04:46:32.593
2098
2014-12-19T04:46:32.593
208
2082
answer