拥有<a> in </a> <li> <a> take up entire height in justified </a> <ul> <a>

Question

I've created this Plunker（使预览框更宽，以便每个列表项都不会占据一条线。）

我有以下标记：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="">Here is the first link</a></li>
    <li><a href="">Here is the second link</a></li>
    <li><a href="">Yet another, this time with a lot more text that wraps</a></li>
    <li><a href="">Here is the second link</a></li>
</ul>

我希望所有锚点占据相同的高度，它们所包含的li的100％。所以如果锚具有足够的文本，它包含在列表项中，那么所有的锚点应该有相同的高度。

问题似乎是如何实现.nav-justified，因为列表项目具有display: table-cell;，这是允许它们被证明是合理的，但是阻止锚点占据整个高度。除了使列表项具有静态高度之外，还有什么其他方法？

Answer 1

以像素为单位给出高度可以做到这一点。

jsfiddle

li {
  border: 1px solid red;
  height:80px; 
}