1

我已经尝试了一切来对齐这些框，所以它们从同一个地方开始向下。我不确定将哪个 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>

有任何想法吗？

4

1 回答 1

5

修改了您的 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 小提琴演示。

在上面，一旦文本被包装在一个标签中（成为label元素），它就可以被分配display: inline-block;，然后可以被赋予一个width. label此外，从 . 的关闭和 . 的开头之间删除了空格input，以防止 HTML 文件中的空格导致两个元素之间出现任何空格。

于 2012-04-28T22:44:22.423 回答