html - 使用相对位置的底部？

Question

我正在尝试获取一系列 <a>标 checkout 现在其父标签的底部 <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工作作风