並排對齊控件

Question

我必須在時間/分鐘/上午時段的日期字段旁邊顯示三個下拉菜單。 如何水平並排對齊所有四個控件（包括日期）？

我試圖將它們包裝到一個div中，並使用float：left，但它似乎沒有工作。

這裏是小提琴： http://jsfiddle.net/ppTPE/

Answer 1

的jsfiddle：http://jsfiddle.net/ppTPE/1/

試試這個：

HTML：

<div> 
    <input type="text" class="align"> 
    <ol class="align"> 
     <li class="align"> 
      <select name="hour" class="text"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
      </select> 
     </li> 
     <li class="align"> 
      <select name="minute" class="text"> 
       <option value="0">00</option> 
       <option value="5">05</option> 
       <option value="10">10</option> 
       <option value="15">15</option> 
       <option value="20">20</option> 
       <option value="25">25</option> 
       <option value="30">30</option> 
       <option value="35">35</option> 
       <option value="40">40</option> 
       <option value="45">45</option> 
       <option value="50">50</option> 
       <option value="55">55</option> 
      </select> 
     </li> 
     <li class="align"> 
      <select name="ampm" class="text"> 
       <option value="0">AM</option> 
       <option value="12">PM</option> 
      </select> 
     </li> 
    </ol> 
    <br /> 
    <div> 

CSS：

.align { 
    display:inline-block; 
    vertical-align:top; 
}