javascript - 下拉菜单显示在右侧而不是 anchor 下方

Question

如果我向左浮动一个我想成为下拉列表切换器的元素，则下拉列表会出现在左侧。我正试图让它走到底部。

这通常不会在常规 Bootstrap 中发生，所以我有点迷茫。有人有什么建议吗？

Here is a Plunker example

<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

我无法解释原因，但 float 就是问题所在。改为设置 anchor inline-block。

Demo

(我个人的政策是在每种情况下都先尝试内联 block 再 float —— float 往往会导致比解决的问题更多的问题。)