html - CSS 一个列表，所以它的大小相同

Question

我有一些使用以下格式的选项卡:

<ul id="tabs">
    <li class="active"><a href="#">One</a></li>
    <li class=""><a href="#">Two</a></li>
    <li class=""><a href="#">Three</a></li>
    <li class=""><a href="#">Four Long Word</a></li>
    <li class=""><a href="#">Five</a></li>
</ul>

但是我不知道如何使所有 < li > 具有相同的高度，以便当处于事件状态且颜色不同时，盒子不会看起来不连贯。

这是 jsfidle:http://jsfiddle.net/BzTjb/9/

js 代码是从另一个fiddle 拿来的，不是我在网站上使用的，它只是为了演示，因为它很简单。

Answer 1

尝试将 li 的 display 属性更改为 table-cell 并删除 float: left，所以 li 的 CSS 看起来像这样:

li {
    width: 20%;
    margin: 0; padding: 0;
    position: relative;
    display: table-cell;
}

Updated JSFiddle