将移动菜单上的最后3个菜单项内联对齐

Question

我的Wordpress主导航菜单中的最后3个项目是社交图标。我想只有这些项目对齐内联/水平移动。

我已经尝试了浮点、内联显示、添加D类-内联显示和flex-direction到3个菜单项，但图标仍然是垂直的。

使用背带主题：

https://wrmission.com/home/

菜单代码（背带主题）

<ul id="main-menu" class="navbar-nav ml-auto"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50 nav-item"><a title="Area" href="#" class="nav-link">Area</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51 nav-item"><a title="Project Story" href="#" class="nav-link">Project Story</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52 nav-item"><a title="Plans" href="#" class="nav-link">Plans</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53 nav-item"><a title="Interiors" href="#" class="nav-link">Interiors</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54 nav-item"><a title="Amenities" href="#" class="nav-link">Amenities</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55 nav-item"><a title="Developer" href="#" class="nav-link">Developer</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56 nav-item"><a title="News" href="#" class="nav-link">News</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-62" class="mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-62 nav-item"><a title="Registration" href="#" class="nav-link">Registration</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-66" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-66 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-facebook"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-67" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-67 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-twitter"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-68" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-68 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-instagram"></i></a></li>
</ul>

CSS：

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-expand-md .navbar-nav .social-inline {
    border-bottom: none;
    display: inline-block!important;
    width: 10%!important;
    float: left!important;
    white-space: nowrap!important;
}

Answer 1

用这个试试：

.navbar-nav
{
   display: -webkit-box!important;
}