垂直對齊的菜單項

Question

在我的頁面上，我有一個帶有徽標，幾個項目和登錄部分的導航欄，右側對齊。

<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

用於line-height因爲這樣

#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>