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

144

La etiqueta no tiene la propiedad 'ancho', entonces, ¿cómo debo controlar el ancho de una etiqueta?

html css label ziiweb
fuente
8
La etiqueta es un elemento en línea, no puede tener un valor de ancho; para hacer esto necesitas poner display:blocko float:left.
Russell Dias

Respuestas:

188

Usando CSS, por supuesto ...

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

El widthatributo está en desuso y CSS siempre debe usarse para controlar este tipo de estilos de presentación.

Josh Stodola
fuente
77
Pero eso lleva a una ruptura en el código, que es probablemente lo que el OP no quiere en primer lugar.
Konrad Rudolph
49
@Konrad Entonces el OP puede usar floatodisplay: inline-block
Josh Stodola
2
Sí, eso es a lo que quería llegar. :-) Este es el aspecto central aquí, ya que es la parte difícil. Simplemente establecer widthno tendrá mucho uso.
Konrad Rudolph
@JoshStodola oh shiiiiit ..... el bloque en línea nunca solía funcionar para mí, ¡intenté flotar y bham! Me pregunto por qué el bloqueo en línea no funcionó para mí
Dheeraj
@lostchild inline-block no ignora los espacios en blanco, esa podría ser la razón por la que tenía problemas con él.
Alex Podworny
91

Usar el bloque en línea es mejor porque no obliga a los elementos y / o controles restantes a dibujarse en una nueva línea.

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

Los elementos en línea (como SPAN, LABEL, etc.) se muestran para que el navegador calcule su altura y ancho en función de su contenido. Si desea controlar la altura y el ancho, debe cambiar los bloques de esos elementos.

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

Srka
fuente
4

Dar ancho a la etiqueta no es una forma adecuada. debes tomar una estructura div o de tabla para administrar esto. pero aún así, si no desea cambiar su código completo, puede usar el siguiente código.

label {
  width:200px;
  float: left;
}
Yaxita Shah
fuente
¿"Dar ancho a la etiqueta de una manera no apropiada" para controlar el ancho de un elemento de etiqueta? ¿Estás seguro?
Oriol
Sí. Porque cuando queremos crear un diseño o estructura específica, se proporcionan las propiedades div y table para usar. La etiqueta no está diseñada para dar ancho o alto ... así que si usamos algo que no está destinado a hacerlo ... comenzará a crear problemas de alguna manera. Espero tener sentido ahora.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
brillante
fuente
1

Definitivamente puedes intentarlo de esta manera 

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

Puede dar el nombre de la clase a todas las etiquetas para que todas tengan el mismo ancho:

 .class-name {  width:200px;}

Ejemplo 

.labelname{  width:200px;}

o simplemente puede dar el resto de la etiqueta 

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