javascript - 调整窗口大小时如何在顶部移动下拉菜单

Question

我有带有下拉导航的顶部菜单，下拉菜单位于主菜单的右侧。

例如：Purchased Items Drop Down Menu

                                     |-------------------|
            Purchased item           |  Dropdown Menu    |
                                     | ------------------| 

当我调整大小时，我想将下拉菜单移动到已购买项目文本的顶部。请建议如何在 html、js 或 jquery 中执行此操作？追逐

HTML

<div>
    <label>Purchased Items </label> 
    <select name="select"> 
        <option>Milk</option>
        <option>Coffee</option> 
        <option>Tea</option> 
    </select> 
</div>

Answer 1

可以通过 CSS 轻松实现，但您需要更改 HTML 元素的顺序：

HTML：

<div>
    <select name="select"> 
        <option>Milk</option>
        <option>Coffee</option> 
        <option>Tea</option> 
    </select> 
    <label>Purchased Items </label> 
</div>

CSS：

label { float: left; }

工作示例：

http://jsfiddle.net/pWMn7/2/

之后您可能需要清除浮动：

div { overflow: auto; } /* clears floats without the need for extra markup */

...并且您可能需要为您的 div/label 提供一个 id 或 class 以阻止将 CSS 应用于页面上的每个标签和 div。