在文本輸入框下方對齊標籤

Question

我正在嘗試將表單中的標籤對齊到文本輸入框下方。我從here調整了我的CSS。

它在IE 9中完美顯示，但我遇到了Firefox，Chrome和其他問題。

下面是它看起來像在IE：

，這是它的樣子在Firefox：

它看起來Chrome比較最差的，但我會喜歡先讓它在Firefox中工作。

的主要問題是：

• 文本輸入應標籤的上方居中。
• 冒號應該與文本輸入垂直對齊。
• 下拉應該與文本輸入垂直對齊。

這裏是我的標記：

<form action="" method="post"> 

    <label for="time">Time settings</label> 

    <div class="description"> 
     Description goes here 
    </div> 

    <span><label for="time">Hour</label> <input type="text" id="time" name="time" maxlength="2" size="2"></span> 
    <span>:</span> 
    <span><label for="time-minute">Minute</label> <input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"></span> 
    <span>:</span> 
    <span><label for="time-seconds">Seconds</label> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"></span> 

    <span> 
     <select id="time-ampm" name="time-ampm"> 
      <option value="am">AM</option> 
      <option value="pm">PM</option> 
     </select> 
    </span> 
    </form> 

這裏是CSS樣式：

<style> 
    span{ 
     display: inline-block; 
    } 

    span input { 
     display: block; 
     position: relative; 
     top: -3em; 
     text-align: center; 
    } 

    span label { 
     display: block; 
     padding-top: 1.5em; 
     text-align: center; 
    } 
</style> 

我也使用HTML 4.01嚴格的DOCTYPE。

這裏的形式住的jsfiddle：http://jsfiddle.net/VuShK/

誰能給我一些指點就如何解決這一問題？

解決方案： 謝謝大家誰回答。

這是我最終的解決方案，文本輸入居中。感謝AVD的幫助。

<style> 
    span{ 
     display: inline-block; 
     position: relative; 
     top: -1em; 
     text-align:center; 
    } 

    span select input { 
     display: block; 
     position: relative; 
     top: -3em; 
    } 

    span label { 
     display: block; 
     position: relative; 
     top:2.7em; 
     text-align: center; 
    } 
</style> 

Answer 1

試試這個，

<style> 
    span{ 
     display: inline-block; 
    } 

    span select input { 
     display: block; 
     position: relative; 
     top: -3em; 
    } 
    span input { text-align:center;} 
    span label { 
     display: block; 
     position: relative; 
     top:3em; 
     text-align: center; 
    } 
</style> 

Answer 2

<div style="overflow:hidden;border:1px blue solid;"> 

<div style="float:left;width:120px;border:1px lime solid;text-align:center;"> 
    <input style="width:80%;"> : 
    <div style="border:1px red solid;">Hours</div> 
</div> 
<div style="float:left;width:120px;border:1px lime solid;text-align:center;"> 
    <input style="width:80%;"> : 
    <div style="border:1px red solid;">Minutes</div> 
</div> 
<div style="float:left;width:120px;border:1px lime solid;text-align:center;"> 
    <input style="width:80%;"> : 
    <div style="border:1px red solid;">Seconds</div> 
</div> 
<div style="float:left;width:120px;border:1px lime solid;text-align:center;"> 
    <select style="width:90%;"></select> 
</div> 

</div> 

Answer 3

入住這

<form action="" method="post"> 
<table> 
    <tr> 
     <td colspan="4"> 
      <label for="time">Time settings</label> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <label for="Description">Description goes here</label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time">:</label></span> 
     </td> 
     <td> 
      <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time-minute">:</label></span> 
     </td> 
     <td> 
      <span> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"><label for="time-minute">:</label></span> 
     </td> 
     <td> 
      <span><select id="time-ampm" name="time-ampm"><option value="am">AM</option><option value="pm">PM</option></select></span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="time">Hour</label> 
     </td> 
     <td> 
      <label for="time-minute">Minute</label> 
     </td> 
     <td> 
      <label for="time-minute">Seconds</label> 
     </td> 
     <td>&nbsp;</td> 
    </tr> 
</table>