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

【问题标题】：Maintaining alignment of navigation items of different widths on smaller screens在较小的屏幕上保持不同宽度的导航项对齐
【发布时间】：2016-09-02 01:22:49
【问题描述】：

我正在尝试在我的 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 以重现该问题。

【问题讨论】：

标签： html twitter-bootstrap css media-queries

【解决方案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 */
}

Revised Demo

【讨论】：