web-dev-qa-db-fra.com

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

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

htmlcsslabel
139
ziiweb

En utilisant CSS, bien sûr ...

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

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

179
Josh Stodola

L'utilisation du bloc en ligne est préférable car elle n'oblige pas les éléments et/ou les contrôles restants à être dessinés sur une nouvelle ligne.

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

Les éléments en ligne (tels que SPAN, LABEL, etc.) sont affichés de sorte que le navigateur calcule leur hauteur et leur largeur 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-block pour résoudre le problème de saut de ligne, cette solution ne fonctionne pas dans IE6, car IE6 ne reconnaît pas le blocage en ligne. Si vous voulez qu'il soit compatible avec plusieurs navigateurs, consultez cet article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

28
Srka

Donner de la largeur à Label n’est pas une méthode appropriée. vous devriez prendre une structure div ou une table pour gérer cela. mais quand même si vous ne voulez pas changer tout votre code, vous pouvez utiliser le code suivant.

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

Vous pouvez certainement essayer de cette façon

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

Vous pouvez soit donner le nom de classe à toutes les étiquettes pour que toutes puissent avoir 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;}
0
Ajinkya