导航对齐问题

Question

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

在这些居中和右侧元素周围制作新的环绕元素将是最后的选择，因为我运行在 wordpress 上使用 php-menues。因此，更改标记可能不像简单的 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://whosebug.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://whosebug.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://whosebug.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://whosebug.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://whosebug.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://whosebug.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://whosebug.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://whosebug.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-评论，这样您就可以在整个 div 居中时测试这个东西。在这种情况下，只需注释掉最后一个 css 规则。相比之下，整个居中div，当最后三个向右浮动时，我不确定这些项目是否真的居中：/

https://jsfiddle.net/37gc2v9x/

提前致谢！

Answer 1

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

Answer 2

你可以用nth-child选择器处理最后三个li，然后将它们向右浮动。

Answer 3

如果您不明白，这里有一些您可以解决的问题。

<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://whosebug.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://whosebug.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://whosebug.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://whosebug.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://whosebug.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>

Answer 4

试试这个：

将菜单分为两部分。
简化 .main-menu class.
使用position:absolute; left:0; right:0;将块扩展到其父块的宽度。
添加 text-align: center; 以将项目放置在块的中心。

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

.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 {
  position: relative;
}

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

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

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

.menu-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.menu-right {
  float: right;
}

<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://whosebug.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-1" class="menu menu-center">
        <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://whosebug.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://whosebug.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://whosebug.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://whosebug.com/">
            <span class="menu-text">CENTER </span>
          </a>
        </li>
      </ul>

      <ul id="menu-mainnav-2" class="menu menu-right">
        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
          <a href="http://whosebug.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://whosebug.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://whosebug.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
                        </span>
          </a>
        </li>
      </ul>
      
    </div>
  </div>
</div>

导航对齐问题

Navigation Alignment Problems

html

javascript

css

jquery

navbar