CSS：アンカーは高さを受け入れません

Question

私はこれで1時間以上私の髪を引っ張ってきました。なぜそれが機能しないのか分かりません。

<div id="mainmenu"> 
    <div class="menu"> 
     <ul> 
      <li class="page_item page-item-6"><a href="http://localhost/mysite/blog/">Blog</a></li> 
      <li class="page_item page-item-4 current_page_item"><a href="http://localhost/mysite/">Front Page</a></li> 
      <li class="page_item page-item-2"><a href="http://localhost/mysite/sample-page/">Sample Page</a></li> 
     </ul> 
    </div> 
</div> 

CSS：

div#mainmenu { position: absolute; top: 40px; right: 0; font-size: 77%; } 
div#mainmenu div.menu ul, 
div#mainmenu div.menu ul li, 
div#mainmenu div.menu ul li a 
{ 
    height: 36px; 
} 
div#mainmenu div.menu ul { 
    display: table; 
    float: left; 
    width: 700px; 
    table-layout: fixed; 

    position: relative; 
} 
div#mainmenu div.menu ul li 
{ 
    display: table-cell; 
    padding: 0 10px; 
    overflow: hidden; 
} 
div#mainmenu div.menu ul li a 
{ 
    width: auto; 
    background: none; 
    margin: 10px auto; 
} 

Answer 1

変更div#mainmenu div.menu ul li aこれまで：HTML

div#mainmenu div.menu ul li a 
{ 
    display: block; 
    width: auto; 
    background: none; 
    margin: 10px auto; 
} 

a要素デフォルトではinlineであり、インライン要素の高さ/幅を設定することはできません。代わりに、高さの

Answer 2

てみ行の高さ：

line-height:36px

http://jsfiddle.net/AlienWebguy/dP4F9/

Answer 3

リンクのデフォルトの表示タイプがインラインである、高さや幅に応答しません。代わりに、あなたのリンクがインラインブロックであるように指示します。インラインブロックはリンクの流れを保存しますが、特定のサイズ（高さ）であることを尊重します。

div#mainmenu div.menu ul li a 
{ 
    display:inline-block; 
    height:36px; 
}