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

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

您需要table-cell li而不是a，因为a正在li内嵌套

<强> Working codepen Demo

例如：

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