wake-up-neo.net

Wie kann ich die Breite eines Label-Tags steuern?

Das Label-Tag hat nicht die Eigenschaft 'width'. Wie soll ich die Breite eines Label-Tags steuern?

139
ziiweb

Natürlich mit CSS ...

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

Das width -Attribut ist veraltet und CSS sollte immer verwendet werden, um diese Art von Präsentationsstilen zu steuern.

179
Josh Stodola

Die Verwendung des Inline-Blocks ist besser, da die verbleibenden Elemente und/oder Steuerelemente nicht in einer neuen Linie gezeichnet werden müssen.

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

Inline-Elemente (wie SPAN, LABEL usw.) werden so angezeigt, dass ihre Höhe und Breite vom Browser anhand ihres Inhalts berechnet werden. Wenn Sie Höhe und Breite steuern möchten, müssen Sie die Blöcke dieser Elemente ändern.

display: block; bewirkt, dass das Element als geschlossener Block angezeigt wird (wie bei DIV-Tags). Dies bedeutet, dass nach dem Element ein Zeilenumbruch erfolgt (nicht inline). Sie können zwar display: inline-block Um das Problem des Zeilenumbruchs zu beheben, funktioniert diese Lösung in IE6 nicht, da IE6 Inline-Block nicht erkennt. Wenn Sie möchten, dass es browserübergreifend kompatibel ist, lesen Sie diesen Artikel: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

28
Srka

Es ist nicht richtig, dem Etikett eine Breite zu geben. Sie sollten eine Div- oder Tabellenstruktur verwenden, um dies zu verwalten. Wenn Sie jedoch nicht den gesamten Code ändern möchten, können Sie den folgenden Code verwenden.

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

Sie können auf jeden Fall auf diese Weise versuchen

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

Sie können entweder allen Beschriftungen den Klassennamen geben, sodass alle die gleiche Breite haben können:

 .class-name {  width:200px;}

Beispiel

.labelname{  width:200px;}

oder Sie können einfach den Rest des Etiketts geben

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