css - 并排对齐控件

Question

我必须在日期字段旁边显示三个下拉菜单，分别表示小时/分钟/上午。如何并排水平对齐所有四个控件(包括日期)？

我尝试将它们包装到一个 div 中并使用 float:left 但它似乎不起作用。

这是 fiddle : 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; 
}