垂直对齐列表

Question

我的网站上有一个导航（列表），列表项不同heights。我想将列表垂直对齐到底部：

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

查看我的FIDDLE。

Answer 1

您可以使用display:inline-block;代替float，不要忘记remove extra space。

Jsfiddle