垂直对齐列表

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