最後一項隱藏浮動：左

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 #news更換a #about，a #news正在顯示但不a #about，所以最後一個項目總是隱藏在我的代碼。爲什麼？它只是鏈接float:left和display block，mySep在左邊。

Answer 1

您將您的<a>標籤設置爲寬度的25％，但分隔符<div>標籤分別爲2px。所以所有4 <a>標籤加上<div>標籤的總和大於100％。這迫使最後一個<a>標籤落在窗口下方。

Answer 2

在你的CSS改變這個

.nav div.mySep { 
    width: 2px; 
    height: 60px; 
    float: left; 
    background-color: #E0E0C7; 
} 

此：

.nav div.mySep { 
    width: 2px; 
    height: 60px; 
    display: inline; 
    background-color: #E0E0C7; 
} 

只是這一行： 顯示：內聯; 並顯示最後一個元素。