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在左侧浮动。

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;
}

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

用float：left隐藏的最后一项

2 个答案: