在较小的屏幕上保持不同宽度的导航项的对齐

Question

我正在尝试在我的 wordpress 网站上对齐我的导航菜单。 我唯一的问题是，当浏览器缩小到移动width ……导航中的最后一项与导航中的其他项不对齐，因为它之前的项只有 3 个字母长。

预览：

我的代码：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
<nav id="nav">
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav') ); ?>
</nav>

我目前正在使用媒体查询：

@media only screen and (min-width: 388px) and (max-width: 480px) {
    .nav li:last-child a {
        margin-left: 20px;
    }
}

但是当我调整浏览器的大小时......它会在width 388px处对齐混乱，而在我的iphone 6它会在width 375px处width 375px 。 有没有更好的方法来对齐我的菜单，或者我应该在这里坚持媒体查询？

更新

JSFiddle

请将 JSFiddle 输出面板上的宽度更改为 438px 以重现该问题。

Answer 1

为什么不让所有导航项的宽度相同，这样它们在页面上都占用相等的空间？

尝试这个：

#nav li {
  /* padding: 0 16px;  <-- remove; use text-align instead */
  font: 400 18px/13px 'Open Sans', sans-serif;
  display: inline-block;
  width: 5em;
  text-align: center;
  border: 1px solid black; /* for illustration only */
}

修改后的演示