html - 用 float 隐藏的最后一项 :left

Question

我有一个非常奇怪的问题，我将向左浮动用于菜单(导航项)，但最后一项被隐藏了!

<!-- NAV -->
<nav class="nav myClearfix" ng-controller="NavCtrl">


    <a id="home" class="active" href="#home" ng-click="menu='home'" ng-class="{active: menu=='home'}">
        <i class="icon-home fa fa-home"></i>
    </a>

    <div class="mySep"></div>

    <a id="lulu" href="#lulu" ng-click="menu='lulu'" ng-class="{active: menu=='lulu'}">
        <img src="img/nav/luluface.png" alt="lulu" class="animatedPerso infinite wobble"/>
    </a>

    <div class="mySep"></div>

    <a id="news" href="#news" ng-click="menu='news'" ng-class="{active: menu=='news'}">
        <i class="icon-news fa fa-bell"></i>
    </a>

    <div class="mySep"></div>

    <a id="about" href="#about" ng-click="menu='about'" ng-class="{active: menu=='about'}">
        WHERE I AAAAAAM ?
    </a>


</nav>

查看实际效果:http://jsfiddle.net/62Pqy/

我不明白，当我将 a #about 替换为 a #news 时，显示的是 a #news 而不是 a #about，所以最后一项总是隐藏在我的代码中。为什么？它只是与 float:left 和 display block 的链接，以及 mySep 在 float left 中。

Answer 1

您正在设置您的 <a>标签占宽度的 25%，但分隔符 <div>标签是 2px每个。所以所有 4 <a> 的总和标签加上 <div>标签大于 100%。这迫使最后一个 <a>标签放在窗口下方。