在同一水平线上放置两个ul部分

Question

我有一个nav部分，其中包含页面左侧的下拉菜单项（使用Bootstrap CSS的典型UL / LI）。

我想在页面右侧放置另一个UL / LI，用于登录和注册项目。我希望登录和注册项目与下拉菜单行的顶部位于同一水平线上。

如何做到这一点？

这是一个jsFiddle链接：http://jsfiddle.net/BaR3q/24/

Answer 1

您可以使用您发布的第二个小提琴并应用my edit of your first fiddle的基础知识，如下所示：Demo

.nav-pills, .right-list  {
    display:inline-block;
    vertical-align:middle;
}
.right-list ul li {
    float:left; /* Needs a float for some reason, not sure why */
}

注意我通过在右侧列表中添加div并在nav内移动它来稍微更改了HTML，这应该是

或者，您可以使用display:flex。 Demo here

nav  {
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.list-right {
    margin-top:10px;
}