Comment puis-je contrôler la largeur d'une étiquette d'étiquette?

144

La balise d'étiquette n'a pas la propriété 'width', alors comment dois-je contrôler la largeur d'une balise d'étiquette?

html css label ziiweb
la source
8
L'étiquette est un élément en ligne, il ne peut pas avoir de valeur de largeur; pour ce faire, vous devez mettre display:blockou float:left.
Russell Dias

Réponses:

188

En utilisant CSS, bien sûr ...

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

L' widthattribut est obsolète et CSS doit toujours être utilisé pour contrôler ces types de styles de présentation.

Josh Stodola
la source
7
Mais cela conduit à une rupture du code, ce qui est probablement ce que l'OP ne veut pas en premier lieu.
Konrad Rudolph
49
@Konrad Alors l'OP peut utiliser floatoudisplay: inline-block
Josh Stodola
2
Ouais, c'est ce que je voulais en venir. :-) C'est l'aspect central ici, puisque c'est la partie difficile. Seul le réglage widthne sera pas très utile.
Konrad Rudolph
@JoshStodola oh shiiiiit ..... inline-block n'a jamais fonctionné pour moi, j'ai essayé float and bham! Je me demande pourquoi le bloc en ligne n'a pas fonctionné pour moi
Dheeraj
@lostchild inline-block n'ignore pas les espaces, c'est peut-être pour cette raison que vous rencontrez des problèmes avec lui.
Alex Podworny
91

L'utilisation du bloc en ligne est préférable car il ne force pas les éléments et / ou contrôles restants à être dessinés dans une nouvelle ligne.

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

Les éléments en ligne (tels que SPAN, LABEL, etc.) sont affichés de sorte que leur hauteur et leur largeur soient calculées par le navigateur en fonction de leur contenu. Si vous souhaitez contrôler la hauteur et la largeur, vous devez modifier les blocs de ces éléments.

display: block;rend l'élément affiché sous forme de bloc solide (comme les balises DIV), ce qui signifie qu'il y a un saut de ligne après l'élément (il n'est pas en ligne). Bien que vous puissiez utiliser display: inline-blockpour résoudre le problème du saut de ligne, cette solution ne fonctionne pas dans IE6 car IE6 ne reconnaît pas le bloc en ligne. Si vous souhaitez qu'il soit compatible avec tous les navigateurs, consultez cet article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Srka
la source
4

Donner de la largeur à Label n'est pas une bonne manière. vous devriez prendre une structure div ou table pour gérer cela. mais toujours si vous ne voulez pas changer tout votre code, vous pouvez utiliser le code suivant.

label {
  width:200px;
  float: left;
}
Yaxita Shah
la source
"Donner de la largeur à Label d'une manière incorrecte" pour contrôler la largeur d'un élément d'étiquette? Êtes-vous sûr?
Oriol
Oui .. Parce que lorsque nous voulons créer une mise en page ou une structure spécifique, les propriétés div et table sont fournies à utiliser. L'étiquette n'est pas destinée à donner la largeur ou la hauteur .. donc si nous utilisons quelque chose qui n'est pas censé le faire .. cela commencera à créer des problèmes d'une manière ou d'une autre. J'espère avoir un sens maintenant.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
brillant
la source
1

Vous pouvez certainement essayer de cette façon 

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

Vous pouvez soit donner un nom de classe à toutes les étiquettes afin qu'elles aient toutes la même largeur:

 .class-name {  width:200px;}

Exemple 

.labelname{  width:200px;}

ou vous pouvez simplement donner le reste de l'étiquette 

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