使浮动链接具有相同的高度？

Question

我正在制作一个液体宽度的网站。我有 3 个并排的链接，每个占 33%。

对于较小的屏幕宽度，文本会自动换行，首先是文本最长的链接。我需要的是所有链接都具有相同的高度。

http://codepen.io/anon/pen/HGFeJ

<ul>
  <li>
    <a href="#">Some text</a>
  </li>
  <li>
    <a href="#">Some other longer text</a>
  </li>
  <li>
    <a href="#">Short</a>
  </li>
</ul>

a {
  float: left;
  padding: 10px;
  width: 33%;
  border: 1px solid grey;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul {
  max-width: 50%;
  margin: auto;
  background: gold;
  overflow: auto;
}

通过阅读关于 SO 的其他答案，我认为 id 可以使用表格和表格单元格显示 CSS 属性来执行此操作，但它似乎不起作用：

http://codepen.io/anon/pen/toAIa

Answer 1

您需要为li 而不是a 提供table-cell，因为a 嵌套在li 中

Working codepen Demo

例如：

li{
  display: table-cell;
  border: 1px solid grey;
  width: 33%;
  vertical-align:top;
}