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。

如何在调整窗口大小时将下拉菜单移到顶部

1 个答案: