下拉菜单出现在右侧而不是锚点下方

Question

如果我向左浮动一个想要作为下拉菜单切换的元素，下拉菜单会出现在左侧。我正在努力让它跌到谷底。

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

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

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

Demo

（我个人的政策是在每种情况下都在浮点数之前尝试 inline-block ——浮点数往往会导致比它们解决的问题更多的问题。）

Answer 2

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

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

关键变化：

1. 使用 div 代替 span。 Span 是 inline-block 元素（出现在同一行）， div 是块元素（出现在新行）
2. 添加 clearfix 类。使用 float 时，它可以防止所有对象与它发生碰撞（因此破坏了我们让 div 换行的计划）。 clearfix 类纠正浮动元素。