1

I have tried everything to align these boxes, so they start from the same place downwards. I'm not sure which div to put in my stylesheet

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

Any ideas?

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. また、 HTML ファイル内の空白が 2 つの要素間に空白を生じさせないようにするために、の終了labelと の開始の間から空白が削除されました。input

于 2012-04-28T22:44:22.423 に答える