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

Question

我正在制作一个自适应宽度的网站。我有三个链接并排放置，每个链接占据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上的答案，我认为我可以使用表格和单元格显示CSS属性来实现这一点，但似乎行不通：

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

- Evanss

---

之前实际上已经问过这个问题了... 如何在不定义高度属性的情况下浮动一个 div 元素 - fiskolin

Answer 1

你需要给 li 元素添加 table-cell 样式，而不是给嵌套在 li 中的 a 元素添加样式。

工作中的 CodePen 演示

例如：

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

- Surjith S M

---

公平地说，这并没有使锚点的高度相同，只是li的高度相同。 - Matt

@Matt 在截图中已经回答了 OP 所问的问题。他并不想增加 <a> 的高度。 - Surjith S M