Modelowy Modelowy - 4 months ago 19
CSS Question

Menu items aligned vertically

On my page i've got a navbar with logo, several items and login section which is aligned to the 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>


I try to make this login section to be aligned vetically on the same height as the remaining menu elements, but floating takes these items out of the normal flow and I've got no idea how do I achieve this?

Here's what I'm talking about: http://codepen.io/anon/pen/grBXJa

Answer

Used to line-height as like this

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