在A元素中将文本对齐到底部

Question

我有一个包含可点击块的菜单。 Joomla吐出了普通的ul/li/a等级。

我喜欢使整个块都可单击，并使文本垂直对齐bottom ，希望这两个都是问题所在。

HTML：

<div>
    <ul>
        <li><a>Klinisch onderzoek</a></li>
        <li><a>Geneesmiddel- registratie</a></li>
        <li><a>Medische hulpmiddelen</a></li>
        <li><a>Orthopedie</a></li>
        <li><a>Leesbaarheids- test</a></li>
    </ul>
</div>

CSS：

ul li {
    list-style-type: none;
    float: left;
    margin: 0 0 15px 15px;
    background-color: #BA2876;
}
ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}
ul li a:hover {
    text-decoration: underline;
}

在这里看到我的小提琴

Answer 1

您可以将锚设置为table-cell，然后设置垂直对齐方式，而不是将锚设置为display：block：

ul li a {
    display: table-cell;
    vertical-align:bottom;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}

jsFiddle示例

Answer 2

您可以使用display: table-cell和vertical-align: bottom 。

下面的例子：

 ul li { list-style-type: none; float: left; margin: 0 0 15px 15px; background-color: #BA2876; } ul li a { display: table-cell; vertical-align: bottom; color: #fff; text-decoration: none; font-size: 18px; padding: 10px; height: 130px; width: 130px; } ul li a:hover { text-decoration: underline; } 

 <div> <ul> <li> <a>Klinisch onderzoek</a> </li> <li> <a>Geneesmiddel- registratie</a> </li> <li> <a>Medische hulpmiddelen</a> </li> <li> <a>Orthopedie</a> </li> <li> <a>Leesbaarheids- test</a> </li> </ul> </div>