使用與位置相對的底部？

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; 
} 

作風

Answer 2

線高度值添加到您的「＃主菜單裏了」的風格和位置的jsFiddle因此，200px應該工作。