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属性，并为{{1}添加相应的id属性元素：

input

以下CSS有效：

<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>

JS Fiddle demo

在上文中，一旦文本被包装在标签中（成为#address label { display: inline-block; width: 5em; text-align: right; padding-right: 0.5em; } #address input { display: inline-block; }元素），就可以为其分配label，然后可以给它display: inline-block;。此外，在width的关闭和label的开口之间删除了空格，以防止HTML文件中的空格导致两个元素之间的任何空格。

在div中对齐输入字段

1 个答案: