最后一项隐藏浮动：左

我有一个非常奇怪的问题，我使用左浮动菜单（导航项目）和最后一项是隐藏的！最后一项隐藏浮动：左

<!-- 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在左边。

来源

2014-04-06 JoDiii

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

来源

2014-04-07 00:08:49

在你的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; 
}

只是这一行： 显示：内联; 并显示最后一个元素。

来源

2014-04-07 00:55:15

最后一项隐藏浮动：左

回答

相关问题