Wie kann ich die Breite eines Etikettenetiketts steuern?

144

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

html css label ziiweb
quelle
8
Beschriftung ist ein Inline-Element und darf keinen Breitenwert haben. Dazu müssen Sie display:blockoder setzen float:left.
Russell Dias

Antworten:

188

Natürlich mit CSS ...

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

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

Josh Stodola
quelle
7
Dies führt jedoch zu einer Unterbrechung des Codes, was das OP wahrscheinlich überhaupt nicht will.
Konrad Rudolph
49
@Konrad Dann kann das OP verwenden floatoderdisplay: inline-block
Josh Stodola
2
Ja, das wollte ich erreichen. :-) Dies ist der Kernaspekt hier, da es der schwierige Teil ist. Nur die Einstellung widthwird nicht viel nützen.
Konrad Rudolph
@ JoshStodola oh shiiiiit ..... Inline-Block hat nie für mich gearbeitet, ich habe versucht, Float und Bham! Ich frage mich, warum Inline-Block für mich nicht funktioniert hat
Dheeraj
@lostchild Inline-Block ignoriert Leerzeichen nicht, daher hatten Sie möglicherweise Probleme damit.
Alex Podworny
91

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

label {
  width:200px;
  display: inline-block;
}
MA9H
quelle
29

Inline-Elemente (wie SPAN, LABEL usw.) werden angezeigt, sodass 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;Das Element wird als fester Block angezeigt (wie DIV-Tags). Dies bedeutet, dass nach dem Element ein Zeilenumbruch auftritt (es ist nicht inline). Obwohl Sie display: inline-blockdas Problem des Zeilenumbruchs beheben können , 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

Srka
quelle
4

Label eine Breite zu geben, ist kein richtiger Weg. Sie sollten eine Div- oder Tabellenstruktur verwenden, um dies zu verwalten. Wenn Sie jedoch nicht Ihren gesamten Code ändern möchten, können Sie den folgenden Code verwenden.

label {
  width:200px;
  float: left;
}
Yaxita Shah
quelle
"Beschriftung auf nicht ordnungsgemäße Weise geben", um die Breite eines Beschriftungselements zu steuern? Bist du sicher?
Oriol
Ja. Wenn wir ein Layout oder eine bestimmte Struktur erstellen möchten, werden die Eigenschaften div und table zur Verfügung gestellt. Das Etikett ist nicht dazu gedacht, Breite oder Höhe anzugeben. Wenn wir also etwas verwenden, das nicht dazu bestimmt ist, werden auf irgendeine Weise Probleme entstehen. Ich hoffe ich mache jetzt Sinn.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
glänzend
quelle
1

Sie können dies auf jeden Fall versuchen 

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

Sie können entweder allen Labels einen Klassennamen geben, damit alle dieselbe 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;}
Ajinkya
quelle