菜单链接中链接文本的长度不同会使链接高度不等

Question

我制作了具有不同长度链接文本的菜单链接。这使得一些链接包裹在2行而其他链接没有。

在下图中，红色区域是一个链接，因此可点击，但灰色区域不是。我的代码是第一个例子，我需要创建第二个：

<ul>
  <li>
    <a href="#">Link 1</a>
  </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;
  display: table;
  width: 400px;
  border: 1px solid black;
}
li {
   list-style-type: none;
   display: table-cell;
   background: grey;
   width: 33%;
}
a {
  background: red;
  width: 100%;
  display: inline-block;
  height: 100%;
}

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

Answer 1

此FIDDLE有效。

CSS

ul {
  padding: 0;
  margin: 0;
  display: table;
  width: 400px;
  border: 0px solid black;
}
li {
   list-style-type: none;
   display: table-cell;
   background-color: transparent;
   margin-left: 5px;
   border: 5px solid white;
   width: 33%;
   height: 75px;
   text-align: center;
   border: 1px solid gray;
}
a {
  display: table;
  background-color: red;
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
a span {
    display: table-cell;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;

}

这是firefox中的结果：