Search code examples
htmlcsslistnavigationvertical-alignment

Vertical align list

I've got a navigation (list) on my site with different heights of the list items. I'd like to vertically align the list to the bottom:

enter image description here

<nav class="main-nav">
    <ul>
        <li class="active"><a href="#">Lorem 1</a></li>
        <li><a href="#">Lorem 2</a></li>
        <li><a href="#">Lorem 3</a></li>
        <li><a href="#">Lorem 4</a></li>
        <li><a href="#">Lorem 5</a></li>
    </ul>
</nav>

.main-nav ul {
    list-style: none;
    float: left;
}

.main-nav ul li {
    float: left;
}

.main-nav ul li a {
    padding: 20px;
    background: orange;
    text-decoration: none;
    color: #000;
}

.main-nav ul li.active a {
    padding: 30px 20px;
}

Check out my FIDDLE.

Solution

  • You can use display:inline-block; instead of float and do not forget to remove extra space.

    Jsfiddle