表單字段水平對齊

Question

如何讓這個城市國家zip包在同一行 對準我減少了寬度，但它不工作 如何解決它

<div class=""> 
    <label class="" for="">City</label><input style="width: 54px;" type="text"> 
    <label class="" for="">State</label><input style="width: 54px;" type="text"> 
    <label class="" for="">Zip</label><input style="width: 54px;" type="text" > 
</div> 

http://jsfiddle.net/VXXPC/19/

Answer 1

您的標籤display: block。使用display: inline-block就像你在這個領域。

這花了我大約10秒鐘的時間來使用瀏覽器開發工具來實現。在大多數現代瀏覽器中打開[F12]（FF需要安裝FireBug）才能啓動捆綁的開發人員工具。在這裏，您可以檢查有問題的元素並查看影響元素的CSS。

這是updated fiddle。我已經向父div div inline-fields申請了一門課。在我添加的CSS中：

.inline-fields label { 
    display: inline-block; 
}