Javascript 导航对准问题

使用css或javascript/jQuery操作是否可以将某些导航项集中在同一div容器中，而此容器中的其他ITME（最后三个）应该位于导航栏的右边缘？我用flexbox和内嵌块/文本对齐中心试过。我能把整个div容器放在中间。但当我将最后三个div移到右侧时，其余的项目仍保持其位置。基于这一事实，三个项目现在位于右侧，居中导航栏的宽度发生了变化，它实际上应该向右移动一点以再次居中

围绕这些居中和右侧元素创建新的wrap元素将是最后的选择，因为我使用php菜单在wordpress上运行。因此，更改标记可能不像简单的css或javascript/jquery解决方案那么容易。 你可以看看贴出的标记下面的小提琴，以便更好地理解我；）

默认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>

JSFIDLE示例：

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

---

提前谢谢

将

float:right

添加到最后一个项目中，其他项目使

显示：内联块和<代码>浮动：无然后仅更改。菜单为
文本对齐：居中和<代码>宽度：100%
您可以通过第n个子选择器处理最后三个li，并将它们向右浮动。
如果您没有正确处理，这里有一些问题需要解决

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

    .row {
        position: relative;
        width: 120%;
        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;
        height: 50px;
    }

     #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;
     }
    .spacer {
        width: 30%;
    }
    </style>
    <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="38" width="51"> </a> </div>
      <table width="92%" border="0">
        <tr>
          <td width="85%" height="38"><table width="109%" height="25" border="0" align="right">
            <tr>
              <td width="47%" height="21">&nbsp;</td>
              <td width="53%" align="right"> <ul id="menu-mainnav" class="menu"  style="float:none;">
                <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-" 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-2" 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-3" 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>
                <a href="http://stackoverflow.com/"></a></ul></td>
              </tr>
          </table></td>
          <td width="15%" align="left"><table width="213" border="0" align="right"  class="menu">
            <tr>
              <td width="56%" height="21" align="right"><ul id="menu-mainnav" class="menu"><li id="menu-item-5" 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 &nbsp; </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></td>
              </tr>
          </table></td>
        </tr>
      </table>
    </div>
    <p>&nbsp;</div>
    </div></p>


.标题{
高度：100px；
溢出：可见；
填充：0px；
}
.行{
位置：相对位置；
宽度：120%；
保证金：0自动；
最大宽度：100%；
}
.标志{
显示：内联块；
宽度：自动；
浮动：左；
}
.主菜单{
浮动：对；
位置：相对位置；
z指数：200；
溢出：隐藏；
高度：50px；
}
#菜单主导航{
列表样式：无；
保证金：0；
填充：0；
显示：块；
}
#菜单mainnav>li{
浮动：左；
保证金：0；
填充：0；
位置：相对位置；
光标：指针；
显示：列表项；
文本对齐：匹配父对象；
右边填充：11px；
}
#菜单mainnav>li>a{
字体大小：11px；
显示：块；
框大小：内容框；
}
.垫片{
宽度：30%；
}












试试这个：

把菜单分成两部分

简化
。主菜单
类

使用
位置：绝对；左：0；右：0
将块扩展到其父块的宽度

添加
文本对齐：居中将项目放置在块的中心

请检查结果：


.header{
高度：100px；
溢出：可见；
填充：0px；
}
.行{
位置：相对位置；
宽度：94.444%；
保证金：0自动；
最大宽度：100%；
}
.标志{
显示：内联块；
宽度：自动；
浮动：左；
}
.主菜单{
位置：相对位置；
}
.菜单{
列表样式：无；
保证金：0；
填充：0；
显示：块；
}
.菜单>李{
浮动：左；
保证金：0；
填充：0；
位置：相对位置；
光标：指针；
显示：列表项；
文本对齐：匹配父对象；
右边填充：11px；
}
.菜单>李{
浮动：无；
显示：内联块；
}
.菜单>李>a{
字体大小：11px；
显示：块；
框大小：内容框；
}
.菜单中心{
位置：绝对位置；
左：0；
右：0；
文本对齐：居中；
}
.菜单右键{
浮动：对；
}










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

    .row {
        position: relative;
        width: 120%;
        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;
        height: 50px;
    }

     #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;
     }
    .spacer {
        width: 30%;
    }
    </style>
    <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="38" width="51"> </a> </div>
      <table width="92%" border="0">
        <tr>
          <td width="85%" height="38"><table width="109%" height="25" border="0" align="right">
            <tr>
              <td width="47%" height="21">&nbsp;</td>
              <td width="53%" align="right"> <ul id="menu-mainnav" class="menu"  style="float:none;">
                <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-" 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-2" 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-3" 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>
                <a href="http://stackoverflow.com/"></a></ul></td>
              </tr>
          </table></td>
          <td width="15%" align="left"><table width="213" border="0" align="right"  class="menu">
            <tr>
              <td width="56%" height="21" align="right"><ul id="menu-mainnav" class="menu"><li id="menu-item-5" 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 &nbsp; </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></td>
              </tr>
          </table></td>
        </tr>
      </table>
    </div>
    <p>&nbsp;</div>
    </div></p>