Skip to main content
本文に 81 文字追加
ソース リンク

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

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>

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

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>

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

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>

ソース リンク

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

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>