如何在調整窗口大小時將頂部的下拉菜單移至頂部

Question

我有下拉菜單的頂部菜單，下拉菜單位於主菜單的右側。

對於如：Purchased Items Drop Down Menu

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

當我調整，我想在下拉菜單移動到購買項目文本的頂部。 請建議如何在html，js或jquery中做到這一點？ rchased

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他的頁面。