ポジションの相対的なボトムを使用していますか？

Question

<a>のタグを親の基盤に表示しようとしています<li>。

問題は2つあります。 position: relativeを使用すると、bottom: 0;は効果がありません。 position: absoluteを使用した場合、<li>の幅は重複しています。

topスタイルを使用して最初の問題を修正できますが、テキストサイズが不明で、上部要素が両方の要素の上端から測定されるので理想的ではありません（要素の底辺が私がフォントサイズを知っていない限り）。

定義済みの幅で2番目の行を修正できますが、これにより短いタイトルの要素に不要な空白が追加されます。

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

あなたの "＃メインメニューのli A" スタイルと位置に行の高さの値を追加します。したがって、200ピクセルは機能するはずです。