【发布时间】：2016-10-21 15:08:38
【问题描述】：
是否可以使用 css 或 javascript/jQuery-manipulation 将一些导航项置于同一个 div 容器中，而该容器中的其他项（最后三个）应该位于导航栏的右边缘？我已经尝试过使用 flexbox 和 inline-block/text-align center。我能够使整个 div 容器居中。但是当我将最后三个 div 向右移动时，剩余的项目保持在它们的位置。基于三个项目现在位于右侧的事实，居中导航栏的宽度发生了变化，实际上它应该向右移动一点以再次居中。
围绕这些居中和右侧元素制作新的环绕元素将是最后的选择，因为我在带有 php-menues 的 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>
默认 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/
更新： 这是一个小提琴，我尝试过 text-align 和 inline 解决方案。您可以阅读 CSS 注释，以便在整个 div 居中时进行测试。在这种情况下，只需注释掉最后一个 CSS 规则。与整个居中的 div 相比，我不确定项目是否真的居中，当最后三个浮动到右侧时：/
https://jsfiddle.net/37gc2v9x/
提前致谢！
【问题讨论】：
-
您好，谢谢！我已经用 flexbox 和 margin: auto 试过了。问题是我有超过 1 个最后一项，应该在右侧。这会导致我的测试出现对齐问题，但也许我错了。我会在晚上再试一次，再次:)
-
项目数量无关紧要。只需将
margin-left: auto应用于要向右对齐的组中最左侧的项目。然后确保在左侧添加相同的幻像项目。 jsfiddle.net/nt4prkaq/5
标签： javascript jquery html css navbar