CSS HTML 다중 행 탐색 예제

Question

웹 사이트의 가로 방향 탐색을 생성 중입니다. 다음은 마크 업의 예제입니다 (이 태그는 나를 위해 생성되는대로 제어 할 수 없습니다).

<div id="menu">  
    <ul class="menu"> 
     <li class="menu"><span><a>Link 1</a></span></li> 
     <li class="menu"><span><a>Link 2</a></span></li> 
     <li class="menu"><span><a>Link 3</a></span></li> 
     <li class="menu"><span><a>Link 4</a></span></li> 
     <li class="menu"><span><a>Link 5 a long one</a></span></li> 
     <li class="menu" ><span><a>Link 6 a long one</a></span></li> 
     <li class="menu"><span><a>Link 7</a></span></li> 
     <li class="menu"><span><a>Link 8</a></span></li> 
    <ul> 
</div> 

문제는 각 항목에 여러 단어로 된 8 개의 탐색 항목이 있다는 것입니다. 그것을 적합하게하기 위해 나는 아이템의 너비를 12.5 %로 제한하고 있습니다. 이로 인해 일부 메뉴 항목이 두 줄의 텍스트가되고 다른 항목은 한 줄이됩니다. 나는 각각의 a 태그가 같은 높이가되도록 태그를 얻으려고 노력하고있다. 75px 높이. 이것은 모두 메뉴 항목이되는 동일한 활성 영역을 갖기 때문입니다. 이 위에 텍스트를 세로로 맞추려고합니다. 아래는 내가 시도하는 CSS입니다 :

#menu { 
    text-align:center; 
} 

#menu ul { 
    display:inline-block; 
    margin:0 auto; 
    list-style:none; 
} 

#menu li { 
    display:inline; 
    height:2ems; 
} 
#menu li a { 
    display:block; 
    float:left; 
    width:12.5%; 
    text-decoration:none; 
    padding:0; 
    height:75px; 
    text-align:center; 
} 

내가 잘못 가고있는 부분을 지적 할 수 있습니까? 텍스트가 세로로 정렬되지 않고 태그의 높이가 75px가 아니라 텍스트의 높이입니다.

Answer 1

먼저 </ul>이어야하며 단위는 "ems"가 아니며 height:2em이어야합니다. height은 display:inline이있는 블록에서 작동하지 않습니다. 적어도 display:inline-block이어야합니다.

가장 좋은 해결책은 display:table-cell이지만, IE 6 & 7 (IE 8에서 작동)에서는 작동하지 않습니다.