html - 元素的垂直对齐不起作用

Question

我想要实现的是一组元素(框)，其中包含一个链接。这个链接应该在右下角，但是 vertical-align 属性不起作用

jsFiddle:http://jsfiddle.net/4JMav/

HTML

<ul>
    <li><a href="#">TEST 1</a></li>
    <li><a href="#">TEST 2</a></li>
    <li><a href="#">TEST 3</a></li>
    <li><a href="#">TEST 4</a></li>
    <li><a href="#">TEST 5</a></li>
    <li><a href="#">TEST 6</a></li>
    <li><a href="#">TEST 7</a></li>
</ul>

CSS

ul li
{
    display: inline-table;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    vertical-align: bottom;
    display: block;
    height: 100%;
    padding: 10px;
}

我还尝试了几种垂直对齐和绝对定位的组合，还在 a 元素周围使用了包装器，但还没有任何努力。

问题

如何将链接放在右下角，同时仍将 a 元素扩展到整个正方形？

Answer 1

垂直对齐仅适用于表格单元格:

ul li a {
text-align: right;
vertical-align: bottom;
display: table-cell;
height: 100%;
padding: 10px;
}

JSFiddle:http://jsfiddle.net/4JMav/8/