對齊div中的輸入字段

Question

我已經嘗試了所有對齊這些框，所以它們從同一個地方向下開始。 我不知道該div來把我的樣式表

<div class="boxes"> 
<p class="h3"> You are able to add up to 3 addresses. 
Please select the type of address, using the following guide 
<ul> 
<li>H: Permanent home address</li> 
<li>P: Postal address (where you will be from June to September)</li> 
<li>L: Local address (where you currently live)</li> 
</ul> 
</p> 

<div id="address"> 

<div id="input1" style="margin-bottom:4px;" class="input"> 
Street<span class="required">*</span> 
<input name="Street[]" type="text" > 
</div> 

<div id="input2" style="margin-bottom:4px;" class="input"> 
Line2 
<input name="Line2[]" type="text" > 
</div> 

<div id="input3" style="margin-bottom:4px;" class="input"> 
Line3 
<input name="Line3[]" type="text" > 
</div> 

任何想法？

Answer 1

已經修改你的HTML，包裹在實際label元素標籤/相關的文本，添加了一個for屬性的元素和相應的id屬性的input元素：

<div class="boxes"> 
    <p class="h3"> 
     You are able to add up to 3 addresses. Please select the type of address, using the following guide 
     <ul> 
      <li>H: Permanent home address</li> 
      <li>P: Postal address (where you will be from June to September)</li> 
      <li>L: Local address (where you currently live)</li> 
     </ul> 
    </p> 
    <div id="address"> 
     <div id="input1" style="margin-bottom:4px;" class="input"> 
      <label for="street">Street<span class="required">*</span></label><input name="Street[]" id="street" type="text"> 
     </div> 
     <div id="input2" style="margin-bottom:4px;" class="input"> 
      <label for="line2">Line2</label><input id="line2" name="Line2[]" type="text"> 
     </div> 
     <div id="input3" style="margin-bottom:4px;" class="input"> 
      <label for="line3">Line3</label><input id="line3" name="Line3[]" type="text"> 
     </div> 
    </div> 
</div>​ 

下面的CSS的工作原理：

#address label { 
    display: inline-block; 
    width: 5em; 
    text-align: right; 
    padding-right: 0.5em; 
} 
#address input { 
    display: inline-block; 
}​ 

JS Fiddle demo。

在上面的內容中，一旦文本被包裹在標籤中（成爲label元素），就可以將其分配給display: inline-block;，然後可以給出width。此外，從label關閉和input開始之間刪除了空格，以防止HTML文件中的空白導致兩個元素之間出現空白。