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

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 的情况.有没有更好的方法来对齐我的菜单，或者我应该在这里坚持使用媒体查询？

更新

JSFiddle

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

Answer 1

为什么不让所有导航项都具有相同的宽度，这样它们在页面上的消耗都相等 space？

试试这个：

#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 */
}

Revised Demo

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

Maintaining alignment of navigation items of different widths on smaller screens

html

css

media-queries

twitter-bootstrap