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

Question

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

预览：

我的代码：

<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

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

试试这个：

LOAD CSV WITH HEADERS FROM
'file:///...some_csv.csv' AS line
WITH line
, case 
    when size(line.date_of_birth) = 10 then 
       SPLIT(line.date_of_birth, '/')[0]
    else
       NULL
    end as month
MERGE (p:Person { subject_person_id: line.subject_person_id})
  ON CREATE SET p.month_of_birth = month 
  ON MATCH SET p.month_of_birth = month

Revised Demo