Javascript 下拉菜单显示在右侧，而不是锚定下方

如果我将一个元素向左浮动，我想将其作为下拉列表的切换，则下拉列表将显示在左侧。我想把它弄到底

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

---

我无法解释原因，但浮动是个问题。改为设置锚点

内联块

（我的个人策略是在任何情况下都在浮动之前尝试内联块——浮动往往会导致比解决问题更多的问题。）

我修改了Plunk，这似乎是您想要的

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

//其他代码

关键变化是：

使用div而不是span。Span是内联块元素（显示在同一行上），div是块元素（显示在新行上）

添加clearfix类。使用float时，它可以防止所有对象与它发生碰撞（从而破坏我们在新行上获取div的计划）。clearfix类修正了浮动元素

---

使用这种方法，下拉菜单似乎是相对于页面定位的，而不是相对于锚点。@isherwood确实，下拉菜单类似乎应用了绝对定位。但这很容易解决。我想把重点放在为什么它会出现在同一条线上这太棒了！谢谢Vlad为span vs div发言。这完全有道理@虽然伊舍伍德是对的，但由于我在plunk中没有的内容，我想把它放在锚点上。你能不能把你刚才说的简单的解决方法放进你的2美分里。关键变化：取消浮动和相对位置（我发现浮动应该是最后的选择）。因此，我们回到元素的span。为角框添加display=inline块（我想转到Span，但它会显示出来。我想这与div/Span如何填充“空”空间有关）。位置的添加=下拉列表的绝对值。下拉类应用了“position=relative”，这是一个问题伟大的工作弗拉德，这是可怕的。不幸的是，我忘记了我的

#顶部标题

中的一个关键元素，我在最初的问题中对其进行了更新。但这似乎比我预想的要困难一些。如果你找到时间，（更新了plunk，添加了）。Plunkr链接已修复。我不熟悉Plunkr（通常使用JSFIDLE），并且没有正确地保存它。谢谢你的更新！似乎工作得很好。。。我真的很抱歉，伙计，你能检查一下我在问题中的最新记录，然后给我你的2美分吗？我忘了在

#顶部标题中添加一个重要部分<如果有另一个div试图转到“header”文本的右侧，代码>内联块

似乎无法正常工作。我不认为这有什么关系，所以我把它删掉了：\看起来如果你把搜索栏放在右边，一切都很好。不一定要让我的搜索栏向右浮动。在我头球破门后，我有点想让它坐在左边，我想这就是问题所在。根据页面的不同，我会让其他东西漂浮在那个条上。好的，但现在我们脱离主题了。我不太确定你在找什么，因为你似乎想用

边距：0 auto

将搜索栏居中。看看这个。

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

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