垂直对齐的菜单项

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>