表格单元格的高度相同

Question

我有以下代码，从jQuery步骤插件生成：

<ul>
    <li>
        <a href="#">
            Step 1
        </a>
    </li>
    <li>
        <a href="#">
            Step 2
        </a>
    </li>
    <li>
        <a href="#">
            Step 3
        </a>
    </li>
</ul>

css看起来像这样：

ul li {
    display: table-cell;
    position: relative;
    float: none;
    width: 1%;
}

ul li a {
    display: block;
    text-align: center;
    padding: 12px 18px;
    -webkit-user-drag: none;
    height:100%;
}

我的问题是，当此列表的文本太多时，输出看起来很奇怪：

我该如何解决？我在没有table-cell但是inline-block格式的情况下尝试了它，但没有任何正常工作。有一个简单的方法吗？一个解决方法是计算字母，然后制作一个padding-top，但对我来说，由于网站的响应性，这是胡说八道。

我尝试了（来自100% height on child of "display: table-cell"）：

ul { display:table; }
ul li { display:table-cell; }
ul li a { display:block; height:100%; }

但那也不行。