¿Cómo puedo controlar el ancho de una etiqueta?


La etiqueta label no tiene la propiedad 'width', así que ¿cómo debo controlar el ancho de una etiqueta label?

 129
Author: ziiweb, 2010-05-12

6 answers

Usando CSS, por supuesto...

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

El atributo width está obsoleto, y CSS siempre debe usarse para controlar este tipo de estilos de presentación.

 160
Author: Josh Stodola,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-12 16:05:27

Usar el bloque en línea es mejor porque no fuerza que los elementos y/o controles restantes se dibujen en una nueva línea.

label {
  width:200px;
  display: inline-block;
}
 76
Author: M009,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-04 20:58:09

Elementos en línea (como SPAN, LABEL, etc.) se muestran para que su altura y anchura sean calculadas por el navegador en función de su contenido. Si quieres controlar la altura y el ancho tienes que cambiar los bloques de esos elementos.

display: block; hace que el elemento se muestre como un bloque sólido (como etiquetas DIV), lo que significa que hay un salto de línea después del elemento (no está en línea). Aunque puede usar display: inline-block para solucionar el problema del salto de línea, esta solución no funciona en IE6 porque IE6 no funciona reconoce el bloque en línea. Si quieres que sea compatible con varios navegadores, mira este artículo: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

 27
Author: Srka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-24 19:31:36

Dar ancho a la etiqueta no es una forma adecuada. usted debe tomar un div o estructura de tabla para manejar esto. pero aún así, si no desea cambiar todo el código, puede usar el siguiente código.

label {
  width:200px;
  float: left;
}
 4
Author: Yaxita Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-10 14:03:52
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
 2
Author: shiny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-09 05:48:50

Puede dar nombre de clase a todas las etiquetas para que todas puedan tener el mismo ancho:

 .class-name {  width:200px;}

Ejemplo

.labelname{  width:200px;}

O simplemente puede dar resto de etiqueta

label {  width:200px;  display: inline-block;}
 0
Author: Ajinkya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-21 07:36:37