ちょっとハックっぽいですけど、以下の方法はいかがでしょうか?
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>