菜单项垂直对齐

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> 

我尝试使这个登录部分在与其余菜单元素相同的高度上对齐，但浮动将这些项目从正常流程中取出，我不知道如何实现这一点？

以下是我所说的：http://codepen.io/anon/pen/grBXJa

Answer 1

用于line-height，就像这样

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

＆＃13;

＆＃13;

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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;