1

Estoy haciendo el típico formulario con etiquetas y campos pero, por más que lo establezca a distintos valores en el CSS, el width de las etiquetas no parece tener efecto y cada etiqueta tiene el largo que dicta el texto, por ejemplo:

label {
  width: 120px;
  color: blue;
  background-color: #FAD7A0;
}
<form>
  <label for="nombres">Nombres</label>
  <input type="text" id="nombres" name="nombres" value="Juan"><br>
  <label for="apellidos">Apellidos</label>
  <input type="text" id="apellidos" name="apellidos" value="Castillo"><br>
  <label for="apodo">Apodo</label>
  <input type="text" id="apodo" name="apodo" value="jachguate"><br>
 </form>
 

1 respuesta 1

1

El atributo si funciona, pero debes desplegar las etiquetas con display a alguno de estos valores:

inline-block
inline flex;
inline grid;

label {
  width: 120px;
  color: blue;
  background-color: #FAD7A0;
  display: inline flex;
}
<form>
  <label for="nombres">Nombres</label>
  <input type="text" id="nombres" name="nombres" value="Juan"><br>
  <label for="apellidos">Apellidos</label>
  <input type="text" id="apellidos" name="apellidos" value="Castillo"><br>
  <label for="apodo">Apodo</label>
  <input type="text" id="apodo" name="apodo" value="jachguate"><br>
 </form>

1
  • 1
    Esto sucede porque los elementos de la etiqueta <labe>l, al no tener ninguna regla CSS pre-asignada por el navegador, obtienen el de por defecto, que es inline. El problema es que los elementos con inline se adaptan al tamaño de su contenido, evitando que puedas asignarles un tamaño fijo. La solución, como bien marcas, es usar inline con cualquiera de los otros display que ofrecen comportamiento de bloque (flex, grid, block). De esta manera se obtiene del inline, que permanezca en la misma ´línea que el input y del block que puedas ajustar, entre otras cosas, su width.
    – phpMyGuel
    Commented el 3 jun. a las 7:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.