css - コントロールを横に並べる

Question

時間/分/午前午後の日付フィールドの横に 3 つのドロップダウンを表示する必要があります。4 つのコントロール (日付を含む) を水平方向に並べて配置するにはどうすればよいですか?

それらを 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; 
}