javascript - 导航对齐问题

Question

是否可以使用 css 或 javascript/jQuery 操作将某些导航项置于同一个 div 容器的中心，而该容器中的其他元素(最后三个)应该位于导航栏的右边缘？我已经用 flexbox 和 inline-block/text-align center 试过了。我能够将整个 div 容器居中。但是，当我将最后三个 div 向右移动时，其余元素仍留在原位。基于这三个元素现在位于右侧的事实，居中导航栏的宽度发生了变化，它实际上应该向右移动一点才能再次居中。

围绕这些居中和右侧元素制作新的环绕元素将是最后的选择，因为我在带有 php-menues 的 wordpress 上运行。因此，更改标记可能不像简单的 css 或 javascript/jquery 解决方案那么容易。您可以查看已发布标记下方的 fiddle ，以便更好地理解我；)

默认 HTML 标记:

<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin-       bottom="10px" data-margin-left="0px" data-margin-right="0px">
            <a class="logo-link" href="http://stackoverflow.com/">
                    <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
                </a>
</div>
    <div class="main-menu">
        <ul id="menu-mainnav" class="menu">
            <li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
                <a href="/link1/" aria-haspopup="true">
                    <span class="menu-text">CENTER </span>
                </a>
                </li>
            <li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
                <a href="http://stackoverflow.com/" aria-haspopup="true">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">TO RIGHT </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">TO RIGHT </span>
                </a>
            </li>
            <li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
                <a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
                    </span>
                </a>
            </li>
       </ul></div>      

        </div>

默认 CSS:

.header {
  height: 100px;
  overflow: visible;
  padding: 0px;
}

.row {
  position: relative;
  width: 94.44444%;
  margin: 0 auto;
  max-width: 100%;
}

.logo {
  display: inline-block;
  width: auto;
  float: left;
 }

.main-menu {
  float: right;
  position: relative;
  z-index: 200;
  overflow: hidden;
}

 #menu-mainnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

#menu-mainnav > li {
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
 cursor: pointer;
 display: list-item;
 text-align: match-parent;
 padding-right:11px;
  }

#menu-mainnav > li > a {
 font-size: 11px;
 display: block;
 box-sizing: content-box;
 }

JSFiddle-示例:https://jsfiddle.net/tz0atc4o/1/

更新:这是一个 fiddle ，我在这里尝试了文本对齐和内联解决方案。您可以阅读 CSS-Comments，这样您就可以在整个 div 居中时测试它。在这种情况下，只需注释掉最后一个 css 规则。与整个居中的 div 相比，当最后三个向右浮动时，我不确定这些元素是否真的居中:/

https://jsfiddle.net/37gc2v9x/

提前致谢!

Answer 1

将 float: right 添加到最后一项，其他的则制作 display: inline-block; 和 float:none; 然后只更改 . text-align: center; 和 width: 100%;

菜单