使用相对位置的底部？

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 应该可以。