1

整列しようとしているラベルとテキスト フィールドの例が 2 つあります (このフィドルで確認できます)。最初の例では、次のようなラベルとテキスト フィールドがあります。

<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />

2 番目の例では、次のように div にラベルと 3 つのフローティング テキスト フィールドがあります。

<div>
    <div style="width:100px;float:left;background-color:red;">Date: </div>
    <div>
        <div style="float:left;">
            <input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
            <label for="day">Day</label>
        </div>          
        <div style="float:left;">               
            <input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
            <label for="month">Month</label>
        </div>          
        <div style="float:left;">
            <input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
            <label for="year">Year</label>
        </div>
    </div>      
</div>

上記のように、各ラベルの幅を 100px にしていますが、何らかの理由で、2 番目の例では、ラベルと最初のテキスト フィールドの間にスペースがありません。なぜこれが起こっているのか、なぜ私の幅100pxが私の2番目の例で何の効果もないように見えるのか知っていますか(上記のフィドルリンクを参照)。

ありがとうございました

4

3 に答える 3

10

inline-block前のセクションのように表示する代わりに使用floatしてマージン効果を得ることができます。それ以外の場合は、浮動要素でマージンを追加する必要があります。

<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
        <div style="display:inline-block;">
            <div style="display:inline-block;">
                <input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
                <label for="day">Day</label>
            </div>          
            <div style="display:inline-block;">             
                <input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
                <label for="month">Month</label>
            </div>          
            <div style="display:inline-block;">
                <input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
                <label for="year">Year</label>
            </div>
        </div>

デモ

またはマージンを追加します。

<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>

デモ

ちなみに、インライン スタイルの代わりに CSS ルールを使用することを検討してください。

于 2013-07-09T22:36:02.280 に答える
0

まず、「Firstname」ラベルを使用した最初の例は、「div」とは異なる方法で処理される「label」タグを使用しています。これで、「div」タグで囲まれた「Date」の 2 番目の例が表示されます。このため、ブラウザーがそれらを処理するデフォルトの方法は異なります。

「div」を使用してラベルを囲む右マージンをラベルに追加することで、この違いを簡単に補正できます。

<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>

インライン スタイルを使用しても問題ありませんが、より大きなドキュメントでこれを使用して、これを外部 CSS ファイル内に配置し、代わりに div にクラス (または ID) を使用することをお勧めします。

于 2013-07-09T22:39:43.517 に答える
0

スペースは、最初の要素が置き換えられたインライン要素であるためです。これは、インラインブロックと同じ動作をし、マージンを追加します。

幅については、削除size="2"しmaxlength="2"て上の入力フィールドと同じにします

于 2013-07-09T22:35:12.757 に答える