CSS: anchor sẽ KHÔNG chấp nhận chiều cao

Question

Tôi đã kéo tóc của mình trong hơn một giờ và tôi không thể hiểu tại sao nó không hoạt động.

HTML:

<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

Thay đổi div#mainmenu div.menu ul li a này:

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

a yếu tố s là inline theo mặc định và bạn không thể đặt chiều cao/chiều rộng của các phần tử nội tuyến.

Answer 2

chiều cao dòng Hãy thử thay vì chiều cao:

line-height:36px

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

Answer 3

Loại hiển thị mặc định cho một liên kết là nội tuyến, mà không đáp ứng với chiều cao hoặc chiều rộng. Thay vào đó, hãy nói cho các liên kết của bạn là các khối nội tuyến, giữ nguyên luồng của các liên kết nhưng làm cho chúng tôn trọng yêu cầu của bạn là một kích thước cụ thể (chiều cao).

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