CSS-如何垂直对齐分割导航栏（左右浮动图标）和混合块/内联项

这与贴出的其他问题类似，但更具体一点

我的目标是使用CSS（纯CSS或使用bootstrap）创建一个拆分导航栏，登录和注册按钮与右侧对齐，其他按钮与左侧对齐。在XL屏幕上，登录和注册按钮从一个内联块切换到另一个块显示，这使得它们各占两行。每个都由字体图标和文本组成。通过这个简单的更改，我在垂直对齐其他按钮时遇到了很多麻烦。块按钮在导航栏中垂直居中，但其他按钮太高

所有基于flexbox的解决方案都会产生副作用，即删除登录和注册按钮的正确对齐方式。这包括任何引导类，如d-flex，向css文件添加任何align属性

我可以重新设计navbar，使其在辅助navbar中具有正确对齐的项，就像这里的解决方案一样：但我非常好奇如何解决/理解这个问题（并且能够以尽可能最简单的方式实现它）

以下是我的html结构：

  <div class="container-fluid">
    <div class="row no-gutters flex-row">
            <ul class="">
                <li class=""> <a href="#">Map</a></li>
                ...
                <li class="dropdown">
                    ...
                </li>
                <li class="nav navbar-right " id="signup-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
                </li>
                <li class="nav navbar-right " id="login-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
                </li>
            </ul>
    </div>
</div>

这看起来像什么：

如果我尝试发布的一些flex解决方案，例如，此处，将无法再拆分导航栏：

---

在引导过程中为container div使用“text right”类

这是解决问题的糟糕方法。最好使用

flexbox

而不是

float

例如：

<div class="parent-box">
    <div>
        <a href="#">Map</a>
        ...
    </div>
    <div>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
    </div>
</div>

确实提供了使用文本和图标实现左侧和右侧导航栏项目所需的指导

只需使用2

navbar导航

，并在之间对齐内容即可

<nav class="navbar navbar-dark navbar-expand justify-content-between">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="nav-item text-center">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span></a>
            </li>
            <li class="nav-item dropdown text-center">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
                ...
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item text-center" id="signup-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span></a>
            </li>
            <li class="nav-item text-center" id="login-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span></a>
            </li>
        </ul>
    </div>
</nav>

...

---

如果我正确理解了您的任务，您可以这样做：

将导航拆分为2个区块，并使用

.nav{
证明内容：之间的空间；
}

将块的高度设置为父块的100%

在项目内部使用“对齐项目：居中”

.nav\u列表、.nav\u按钮{
身高：100%；
显示器：flex；
对齐项目：居中；
}

我创造了一支钢笔。我想这对你有帮助。

---

请分享，请张贴一张你希望它看起来如何的图片。另外，您实际上没有使用，您可以尝试将“marginleft:auto”或“marginright:auto”添加到要分别向右或向左移动的元素的第一个元素中。相邻的元素将简单地跟随。我大部分时间都在FBL工作（或者不工作！）。上下页边距相同，上页边距/下页边距…@Zim它应该看起来像顶部，但左侧元素垂直对齐。我没有使用响应式折叠或颜色方案类，所以除非我错过了另一个要求，否则使用导航标记现在是可选的。这个示例codepen包含了我试图组合的所有元素。然而，如果我按照你的步骤去做，那是行不通的。不管导航栏的宽度如何，它都会在列表下方的第二行上创建“登录”和“注册”按钮。要获得详细的解决方案，您需要使用所有元素更新答案代码。我只拿钢笔举例。

.parent-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<nav class="navbar navbar-dark navbar-expand justify-content-between">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="nav-item text-center">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span></a>
            </li>
            <li class="nav-item dropdown text-center">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
                ...
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item text-center" id="signup-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span></a>
            </li>
            <li class="nav-item text-center" id="login-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span></a>
            </li>
        </ul>
    </div>
</nav>