1

すべての入力の左側を揃える方法を見つけようとしています。現在、.element行全体が左揃えになっているため、すべての入力フィールドがずらされています。入力をずらしたくないラベルのテキストを右に揃え、入力をすべて揃えます。ランダムなCSSをたくさん試しましたが、理解できないようです。何か案は？

<form>

    <div class="element"><label>Name:</label><input name="Name" type="text" /></div>
    <div class="element"><label>Email:</label><input name="Email" type="text" /></div>
    <div class="element"><label>Phone:</label><input name="Phone" type="text" /></div>
    <div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div>
    <div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div>
    <div class="element"><label>City:</label><input name="City" type="text" /></div>
    <div class="element"><label>State:</label><input name="State" type="text" /></div>
    <div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div>
    <div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div>
    <div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div>
    <div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" />   </div>

</form>

#registerwrapper .element {
margin-bottom: 15px;
vertical-align: middle;
}

#registrationwrapper label * {
float: left;
font-size: 16px;
}
#registrationwrapper input {
padding: 5px;
margin-left: 10px;
}
4

3 に答える 3

3

ねえ 、このスタイルシートに慣れDisplay inline-block;てwidth

ライブデモ

于 2012-08-09T06:27:15.153 に答える
0

あなたのコードをいくつか変更しましたか、

リンクを参照してください: http://jsfiddle.net/anglimass/V4HAM/8/

于 2012-08-09T06:39:02.700 に答える
0

あなたの質問に対する直接的な答えは次のとおりです。

label {
    display: block;
    margin-right: 5px; /* give some breathing room between your label and inputs */
    padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */
    text-align: right;
    vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */
    width: ?px;
}

しかし、ラベル/フィールドのすべての組み合わせを div (レイヤー) でラップしている理由を尋ねざるを得ませんか? 次のように、代わりに段落を使用することをお勧めします。

<form>
    <p>
        <label for="">Field</label>
        <input id="" />
    </p>
</form>

また、各行にクラスを追加する必要もありません。これを行うだけです：

form p {
}

form p label {
}

form p input {
}

クライアントに送信するバイト数がはるかに少なくなり、HTML がはるかに読みやすくなりました。

于 2012-08-09T06:29:51.160 に答える