并排对齐控件

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