Question

是否可以使用css或javascript / jQuery-manipulation将一些导航项置于同一div容器中，而此容器中的其他主题（最后三个）应位于导航栏的右边缘？我已经尝试过使用flexbox和内联块/文本对齐中心。我能够将整个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-Example：https://jsfiddle.net/tz0atc4o/1/

更新：这是一个小提琴，我尝试了文本对齐和内联解决方案。你可以阅读CSS-Comments，这样你就可以在整个div居中时测试它。在这种情况下，只需注释掉最后一条css规则。相比之下整个居中的div，我不确定这些物品是否真正居中，当最后三个浮动到右边时：/

https://jsfiddle.net/37gc2v9x/

提前致谢！

Answer 1

将display: inline-block;添加到最后一项，而其他人则float:none;和text-align: center;，然后只将.menu更改为width: 100%;和enum EnumA { TEST }; struct ObjectA { std::string name; EnumA type; } std::map<uint8_t, ObjectA> map1= { { 0, { "This is a test", EnumA::TEST} } };

Answer 2

试试这个：

将菜单分为两部分。
简化class hello: def __enter__(self): print("hello in") def __exit__(self,*args): print("hello out")课程。
使用with将块扩展到其父级的宽度。
添加.main-menu以将项目放置在块的中心。

请检查结果：https://jsfiddle.net/glebkema/0on8za7q/

position:absolute; left:0; right:0;

text-align: center;

Answer 3

你可以通过nth-child选择器处理最后三个li并将它们浮动到右边。

Answer 4

如果你不能在这里找到适合你的东西。

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

导航对齐问题

4 个答案: