画像に表示されているフォーマットでテキストエリアのラベルのサイズを変更したいと思います。段落タグを使用して問題が発生していますが、それは起こっていません。テキストエリアのラベルテキストの折り返し
私のコード....
<label for="qual">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>
所望の出力..
はSolutionです。
HTML：
<label for="qual" class="abc">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>
CSS：
.abc{float:left; width:125px; text-align:left; margin-right:30px;}
クラスを作成したくない場合は、CSSでlabelにスタイルを適用することができます。
これが役に立ちます。あなたのHTMLのブロックで
要素が浮動しているのでブロックするために計算されるので、 'display：inline'を宣言する必要はありません。 http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo –
はいを参照してください。私は仕様を見た。撮影ポイント。 fiddleを更新しました - http://jsfiddle.net/CRMhf/1/ - @MarcAudet – Nitesh
追加：
<style>
label { padding:5px; font-weight:bold; float:left; width:150px; }
</style>
を上記のスタイル設定も 間隔を置き換えます：
<label for="qual">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>
あなたは自己中labelとtextarea要素のスタイルにしたいです弾丸が含まれています。
.wrap {
outline: 1px dotted blue; /* Just for demonstration... */
overflow: auto;
}
.wrap label {
outline: 1px dashed blue;
float:left;
width: 10em;
margin-right: 1.00em;
}
は2つのつの子要素を保持するために、親コンテナdiv.wrapを定義し、新しいブロック書式コンテキストを生成するoverflow: autoを指定：以下のCSSと
<div class="wrap">
<label for="qual">This is the format...to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none"
placeholder="Description and Qualification"></textarea>
</div>
：
は、私は、次のHTMLを提案します。
フローティングラベルフィールドが、ページまたはフォーム内にある可能性のある他の隣接要素と干渉しないようにするには、この操作を行います。これは、レスポンシブデザインを構築する場合には重要です。
フィールドは左にフローティングされ、適切な幅を指定する必要があります。マージン、背景色またはイメージ、必要に応じてパディングを適用して、必要なデザインを作成することもできます。
フィドル：これはあなたのラベル・タグで、ニーズに最大幅または最小幅を調整http://jsfiddle.net/audetwebdesign/2sTez/
このラベルをテキストエリアの左側に配置するにはどうすればいいですか？ – Lucy
私は柔軟なデザインを示す第2の例でフィドル/デモを更新しました。ラベルおよびtextarea要素の幅は、親要素の幅を基準にして変化します。ウィンドウの幅を変えることで効果を確認できます。 –
13/20/24インチのスクリーンについては、結果はページの全体の幅によって異なります。しかし、柔軟なバージョン（例2）は、幅広いウィンドウサイズで動作します。全体的なデザインに応じて 'min-width'または' max-width'値を指定することができます。 –
style="max-width: 140px; word-wrap: break-word"
場所。 ヘッドアップはIE
では動作しません。例えばラベルタグ
でtextWrap = "true" 属性を使用してみてください http://www.w3schools.com/cssref/pr_text_white-space.asp
を訪問詳細についてはwhite-space: normal;
を試してみてください。
<Label text="A very long text like this should be wrapped to next line" textWrap="true"></Label>
このラベルをテキストエリアの左側に配置するにはどうすればよいですか？ – Lucy
ありがとうございました!!! 13インチ、20インチ、24インチのスクリーンのようなさまざまなサイズの画面で、テキスト領域の左端から位置を変えずに動作しますか？フォームで使用したいのですがフォーム要素が互いに対して固定の位置になるようにしてください... – Lucy