Question

如果我正在浮动一个元素，我想要成为下拉列表的切换，下拉列表会显示在左侧。我试图让它走到最底层。

这通常不会发生在常规引导程序中，所以我有点迷失。有人有什么建议吗？

<div id="top-header" class="slide" ng-controller="DropdownCtrl">
    <div id="cornerBox"></div>
    <span class="dropdown" dropdown on-toggle="toggled(open)">
        <a id="logo" class="clearfix dropdown-toggle" dropdown-toggle><span>{{ "header" }}</span></a>

        <ul class="dropdown-menu">
            <li ng-repeat="choice in items">
                <a href>{{choice}}</a>
            </li>
        </ul>
    </span>

    <div id="searchBar">
        <div>&nbsp;</div>
    </div>

</div>

CSS

#cornerBox { float:left;width:50px;height:50px;background-color:#3CC274; }

#top-header {
    position:absolute;
    height: 56px;
    width:100%;
    max-height: 50px;
    background-color:#24BD66;
    color:#fff;
    z-index:3;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.23);
}

#logo
{
    font-weight:400;
    color:#000;
    display:block;
    position:relative;
    text-decoration:none;
    float:left;
    width:100px;
    margin:3px 0 0 15px;
    height:30px;
    font-size:30px;
    cursor:pointer;
}

#searchBar { position:relative;width:68%;margin:0 auto;left:100px;border-radius:3px;height:35px;margin-top:7px;background-color:#5ECD8C;}
#searchBar div { float:left;width:50px;height:35px;text-align:center;line-height:35px;font-size:15px; }

Answer 1

我无法解释原因，但浮动是问题所在。请改为设置锚inline-block。

<强> Demo

（我个人的政策是在每种情况下都会在浮动之前尝试内联阻塞 - 浮点数会导致比他们解决的问题更多的问题。）

Answer 2

我修改了Plunk here，它似乎就是你想要的。

        <div class="dropdown clearfix" dropdown on-toggle="toggled(open)">
            // Other Code
        </div>

关键变化：

使用div而不是span。 Span是一个内联块元素（它出现在同一行），div是一个块元素（它出现在一个新行上）
添加clearfix类。当使用float时，它会阻止所有对象与它发生碰撞（因此破坏了我们在新行上获取div的计划）。 clearfix类更正了浮动元素。

下拉菜单显示在右侧而不是锚点下方

2 个答案: