如何對齊表格中的所有輸入

Question

我想弄清楚如何將所有輸入的左側對齊在一起。現在整個.element行與左邊對齊，所以所有的輸入字段都是交錯的。我不希望輸入交錯，我希望標籤文本對齊到右側，輸入全部對齊在一起。我試了一堆隨機CSS，但我似乎無法弄清楚。有任何想法嗎？

<form> 

    <div class="element"><label>Name:</label><input name="Name" type="text" /></div> 
    <div class="element"><label>Email:</label><input name="Email" type="text" /></div> 
    <div class="element"><label>Phone:</label><input name="Phone" type="text" /></div> 
    <div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div> 
    <div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div> 
    <div class="element"><label>City:</label><input name="City" type="text" /></div> 
    <div class="element"><label>State:</label><input name="State" type="text" /></div> 
    <div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div> 
    <div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div> 
    <div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div> 
    <div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" /> </div> 

</form> 

#registerwrapper .element { 
margin-bottom: 15px; 
vertical-align: middle; 
} 

#registrationwrapper label * { 
float: left; 
font-size: 16px; 
} 
#registrationwrapper input { 
padding: 5px; 
margin-left: 10px; 
} 

Answer 1

嘿，現在習慣了這種樣式表給你標籤Display inline-block;，並根據您的佈局給width

Live demo

Answer 2

直接回答你的問題是這樣的：

label { 
    display: block; 
    margin-right: 5px; /* give some breathing room between your label and inputs */ 
    padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */ 
    text-align: right; 
    vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */ 
    width: ?px; 
} 

但是，我不得不問，爲什麼要用div（圖層）包裝所有的標籤/字段組合？我推薦使用段落，如下所示：

<form> 
    <p> 
     <label for="">Field</label> 
     <input id="" /> 
    </p> 
</form> 

而且您也不需要爲每行添加一個類。只是這樣做：

form p { 
} 

form p label { 
} 

form p input { 
} 

現在你向客戶端發送的字節量遠遠不足，而HTML是更容易閱讀。

Answer 3

做了一些改變你的代碼，

見鏈接：http://jsfiddle.net/anglimass/V4HAM/8/