对齐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文件中的空白导致两个元素之间出现空白。