세로로 정렬 된 메뉴 항목

Question

내 페이지에는 로고가있는 navbar가 있고 여러 항목과 오른쪽에 정렬 된 로그인 섹션이 있습니다.

<div id="topbar"> 
    <nav> 
     <ul> 
      <li> 
       <a ui-sref="home" class="home-logo"> 
        <img src="http://placehold.it/350x150"> 
       </a> 
      </li> 
      <li> <a href="#">Item1</a></li> 
      <li> <a href="#">Item2</a></li> 
      <li> <a href="#">Item3</a></li> 
     </ul> 
     <ul> 
      <li> <a href="#">Log In</a></li> 
      <li> 
       <a href="/Login">Sign up for free</a> 
      </li> 
     </ul> 
    </nav> 
</div> 

나는이 로그인 섹션은 나머지 메뉴 요소와 동일한 높이에 vetically 정렬 할 수 있도록 노력하지만, 부동 정상적인 흐름에서 이러한 항목을 소요하고 나는이를 어떻게 아무 생각이 없어했습니다 ?

여기에 내가 무슨 말입니다 : http://codepen.io/anon/pen/grBXJa

Answer 1

이

#topbar li 
    { 
     line-height:150px; 
    } 

ul 
 
{ 
 
    list-style: none; 
 
} 
 

 
#topbar 
 
{ 
 
    font-size: 1.75em; 
 
} 
 

 
    #topbar ul 
 
    { 
 
     padding: 0; 
 
     display: inline-block; 
 
    } 
 

 
    #topbar img 
 
    { 
 
     vertical-align: middle; 
 
     margin-right: 60px; 
 
    } 
 

 
    #topbar li 
 
    { 
 
     display: inline-block; 
 
     margin-right: 60px; 
 
     line-height:150px; 
 
    } 
 
    #topbar ul:last-child 
 
    { 
 
     padding: 0; 
 
     float: right; 
 
    }

<div id="topbar"> 
 
     <nav> 
 
      <ul> 
 
       <li> 
 
        <a ui-sref="home" class="home-logo"> 
 
         <img src="http://placehold.it/350x150"> 
 
        </a> 
 
       </li> 
 
       <li> <a href="#">Item1</a></li> 
 
       <li> <a href="#">Item2</a></li> 
 
       <li> <a href="#">Item3</a></li> 
 
      </ul> 
 
      <ul> 
 
       <li> <a href="#">Log In</a></li> 
 
       <li> 
 
        <a href="/Login">Sign up for free</a> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </div>