web-dev-qa-db-ja.com

ラベルタグの幅を制御するにはどうすればよいですか？

ラベルタグにはプロパティ 'width'がないため、ラベルタグの幅を制御するにはどうすればよいですか？

htmlcsslabel
135
ziiweb

もちろん、CSSの使用...

label { display: block; width: 100px; }

width属性は非推奨であり、CSSを使用してこれらの種類のプレゼンテーションスタイルを常に制御する必要があります。

170
Josh Stodola

インラインブロックを使用すると、残りの要素やコントロールを強制的に新しい行に描画しないため、インラインブロックを使用する方が適切です。

label {
  width:200px;
  display: inline-block;
}
84
M009

インライン要素（SPAN、LABELなど）は、コンテンツに基づいてブラウザによって高さと幅が計算されるように表示されます。高さと幅を制御する場合は、それらの要素のブロックを変更する必要があります。

display: block;は、要素を（DIVタグのような）ソリッドブロックとして表示します。これは、要素の後に改行があることを意味します（インラインではありません）。 display: inline-blockを使用して改行の問題を修正できますが、IE6はインラインブロックを認識しないため、このソリューションはIE6では機能しません。ブラウザ間の互換性が必要な場合は、この記事をご覧ください： http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

28
Srka

ラベルに幅を与えることは適切な方法ではありません。これを管理するには、1つのdivまたはテーブル構造を取る必要があります。ただし、コード全体を変更したくない場合は、次のコードを使用できます。

label {
  width:200px;
  float: left;
}
4
Yaxita Shah
label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}
2
shiny

あなたは間違いなくこの方法を試すことができます

.col-form-label{
  display: inline-block;
  width:200px;}
0
Akarsh Srivastava

すべてのラベルにクラス名を指定して、すべてが同じ幅になるようにすることができます。

 .class-name {  width:200px;}

例

.labelname{  width:200px;}

または、ラベルの残りを単純に与えることができます

label {  width:200px;  display: inline-block;}
0
Ajinkya