0

ラベルと入力フィールドで構成される非常に単純な Web フォームがありますが、ページの中央にフォームを配置し、ラベルの横にきれいに表示されるようにラベルを等幅にする方法を見つけることができないようです。お互いに、お互いの下に。私のページの構造は基本的に次のとおりです。

<body>
<div class="form">
<form method="post">
<fieldset>
<label>Mobile:</label><input type="text" name="msisdn"><br/>
<label>Code:</label><input type="text" name="code"><br/>
<br/>
<input type="image" src="submit-button.gif" alt="Submit">
<br/>
<input type="checkbox" name="ts_and_cs"><label> Accept Terms and Conditions</label>
<br/><br/>
</fieldset>
</form>
</div>
</body>

通常float:left、ラベル フィールドで実行し、ラベルの幅を設定することでこれを修正しますが、このためには、ラベルと入力フィールドをページの中央に配置する必要があります。また、ページはさまざまな画面サイズのモバイル デバイスに表示されるため、ページ (または div を含むもの) の幅を設定することはできません。

フォームの最適なスタイルに関する提案はありますか? ありがとう

4

4 に答える 4

2

この CSS を試してください:

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */
于 2010-04-15T22:24:47.373 に答える
1

周囲を中央に配置し、ラベルの幅で<div class="form">使用できます。float:left中央の の内側で左にフロートしdivます。

おそらく<div>、ラベルと入力の組み合わせを s で囲み、それらを 1 行に収める必要があります。

PS例のせいかどうかはわかりませんが、<label>タグを使用すると、for属性を指定してラベルを入力フィールドに属させ、クリック可能にすることができます。詳細については、こちらを参照してください。

于 2010-04-15T22:25:01.850 に答える
0

label および input タグに margin 属性を設定することをお勧めしますが、各行を div で囲むこともできます。

例えば;

<div style="margin: 0 auto;"> <label>Mobile:</label><input type="text" name="msisdn"> </div>

マージン 0 auto の設定は、基本的にページの中央に配置されます

于 2010-04-15T22:33:21.457 に答える
0

他のものとほとんど同じですが、入力要素を1つ追加して相対的な幅を使用し、縮小して空白を偏らせないようにします。

<head>
    <title></title>
    <style type='text/css'>
    .container
    {
        margin: 0 auto;
    }
    .container label
    {
        /* tweak to taste */
        float: left;
        width: 35%;
    }
    .container input
    {
        /* tweak to taste */
        width: 63%;
    }
    </style>
</head>
<body>
    <div class="form">
        <form method="post">
        <fieldset>
            <div class="container">
                <label>Mobile:</label>
                <input type="text" name="msisdn" />
            </div>
            <div class="container">
                <label>Code:</label>
                <input type="text" name="code" />
            </div>
            <div></div>
            <br />
            <input type="image" src="submit-button.gif" alt="Submit" />
            <br />
            <input type="checkbox" name="ts_and_cs" />
            <label>Accept Terms and Conditions</label>
            <br />
            <br />
        </fieldset>
        </form>
    </div>
</body>
于 2010-04-15T23:11:30.150 に答える