Сделать плавающие ссылки одинаковой высоты?

Question

Im изготовление участка ширины жидкости. У меня 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; 
} 

От чтения другие ответы на SO я думал, что идентификатор быть в состоянии сделать это с помощью таблицы и отображения таблицы ячейки свойств CSS, но это не похоже на работу :

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

Answer 1

Вы должны дать table-cell для li не a, потому что a гнездится внутри li

Working codepen Demo

Eg:

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