响应式导航 - 在某些包装时保持链接的高度相同？

Question

我正在为响应式网站制作菜单。我将菜单设置为完整的网站宽度和每个 链接33％。

对于宽屏幕，一切都很好。链接具有不同的链接文本，因此对于较小的显示，某些链接将在其他链接之前换行

如何使链接保持相同的高度（下图中的第3个示例）？理想情况下，我示例中灰色的整个区域都是可点击的链接。

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

<ul>
  <li>
    <span>
      <a href="#">Link 1</a>
    </span> 
   </li>
   <li>
    <a href="#">Link 2 which has very very very long text</a>
  </li>
   <li>
    <a href="#">Link 3</a>
  </li>
</ul>

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  float: left;
  width: 33%;
  background: grey;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid red;
}

Answer 1

您可以使用display:table;上的<ul>和display:table-cell;上的<li>

请参阅 FIDDLE

CSS：

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display:table;
  width:100%;
}

li {
  display:table-cell;
  width: 33%;
  background: grey;
  padding: 10px;
  border: 2px solid red;
}

---

<强>更新

为了使整个table-cell可以点击，你可以添加这个css：

li {
    overflow:hidden;
}
a {
    display:block;
    margin: -10em;
    padding: 10em;
}

请参阅 FIDDLE