CSSで個数が不定のときに個々の長さが同じ横並びメニューを実装したい


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

[code]

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




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

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




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

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

