0

現在、次のHTMLコードがあります。

            <div class="field">
            <label>E-mail address: </label>
            <input type="text" id="email" name='email' style="width:200px;"></input>
            <span class='warning' id="emailWarning" > </span>
            <div class="tip" id="emailTip"></div>

        </div>

ただし、div要素（class ='tip'）のテキストを、フォームのテキストフィールドの先頭に揃えたいと思います。HTMLとCSSを使用してこれを行うにはどうすればよいですか？

現在の状況は次のとおりです。http： //jsfiddle.net/pEJMD/embedded/result/

4

7 に答える 7

2

これは簡単な回避策になります。divと入力の両方.tipをラッピングdivに入れる必要があります。

于 2013-03-06T12:57:54.590 に答える
1

さて、あなたは、一方のセルに、そして<table>もう一方のセルに、を使用するか、固定の幅/マージンまたはパディングを使用します。<label><input>

解決策1：表

Table solution

このソリューションでは、テーブルを使用してフォームを保持します。上の列はラベル用で、もう1つの列は入力用です。この場合、入力列にヒントが表示され、入力と自動的に位置合わせされます。

これには、ラベル/入力の柔軟な寸法に対応できるプロがいます。そして、テーブルは必ずしも悪ではありません。ラベルを入力に合わせたままにしたい場合はvertical-align:top、CSSにを追加することを覚えておいてください。

解決策2：固定幅

Fixed-width solution

このソリューションでは、ラベルに固定幅を指定し、、またはのいずれかを使用してdivを.tip移動します。marginpaddingleft

これによりレイアウトが所定の位置に保持されるため、非常に長いラベルに注意してください。

于 2013-03-06T12:53:55.707 に答える
1

ラベルに固定サイズを設定できます。ラベルのサイズでdivを右に押すより：

<div class="field">
   <label style="width:100px;">E-mail address: </label>
   <input type="text" id="email" name='email' style="width:200px;"></input>
   <span class='warning' id="emailWarning" > </span>
   <div class="tip" id="emailTip" style="margin-left:100px;">
      The quick brown fox jumps over the lazy dog
   </div>
</div>

そしてその結果。

于 2013-03-06T12:57:11.703 に答える
1

明示的な幅もテーブルも必要ありません。CSSテーブルを使用するだけです（この関連する質問に対する私の回答を参照してください）：

CSS

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

HTML

<form>
    <p>
        <label for="a">Short label:</label>
        <input id="a" type="text">
    </p>
    <p>
        <label for="b">Very very very long label:</label>
        <input id="b" type="text">
    </p>
</form>

これがJSFiddleです：http：//jsfiddle.net/DaS39/1/

また、ラベルを右揃えにする必要がある場合は、ラベルに追加text-align: rightするだけです：http: //jsfiddle.net/DaS39/

于 2014-05-19T15:06:49.620 に答える
0

使用margin-left：

変化する：

<div class="tip" id="emailTip">

に：

<div class="tip" id="emailTip" style="margin-left:95px;">

デモ

marginCSSプロパティの詳細については、こちらをご覧ください。

于 2013-03-06T13:04:51.677 に答える
0

あなたはにを与えることができ、親とあなたheightにlabelに与えることができます。デモを参照してください：http：//jsfiddle.net/pEJMD/4/widthdivfloattip

于 2013-03-06T13:05:58.977 に答える
0

http://jsfiddle.net/4sJ2t/ ラベルに固定幅を指定してから、チップの左マージンを指定する必要があります。

label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
于 2013-03-06T13:07:36.310 に答える