使浮动链接具有相同的高度？

Question

我正在制作一个液体宽度网站。我有3个链接，每个链接占33％。

对于较小的屏幕宽度文字环绕，首先为最长文本的链接。我需要的是所有链接都具有相同的高度。

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

<ul> 
    <li> 
    <a href="#">Some text</a> 
    </li> 
    <li> 
    <a href="#">Some other longer text</a> 
    </li> 
    <li> 
    <a href="#">Short</a> 
    </li> 
</ul> 

a { 
    float: left; 
    padding: 10px; 
    width: 33%; 
    border: 1px solid grey; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
ul, li { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
ul { 
    max-width: 50%; 
    margin: auto; 
    background: gold; 
    overflow: auto; 
} 

从上，所以我想ID能够与表和表单元格显示CSS属性要做到这一点，但它似乎不工作读取其他答案：

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

Answer 1

你需要给table-cell为li不a因为a是内部li

Working codepen Demo

例如筑巢：

li{ 
    display: table-cell; 
    border: 1px solid grey; 
    width: 33%; 
    vertical-align:top; 
}