使用底部与位置相对？

Question

我正在尝试将一系列<a>标记显示在其父<li>的基础上。

这个问题有两个问题。如果我使用position: relative，则bottom: 0;无效。如果我使用position: absolute，<li>的宽度会重叠。

我可以通过使用top样式解决第一个问题，但这不是理想的，因为文本大小未知，并且顶部元素从两个元素的顶部开始测量（因此元素的基础将是除非我知道字体大小，否则不要打基地。）

我可以使用定义的宽度修复第二个，但这会在标题较短的元素上添加不需要的空白区域。

Here is a JSFiddle of the issue.

Answer 1

试试这一点CSS：

#main-menu li a{
    display: table-cell; 
    position: relative;
    vertical-align: bottom;
    height: 111px;
}

jsFiddle工作方式

Answer 2

为“＃main-menu li a”样式和位置添加行高值，200px应该可以正常工作。