1

Tengo este html:

<form>
    <div class="formSorteo">
        <label class="labelSorteo">Nombre organizador</label>
        <input type="text" name="" id="">
        <label class="labelSorteo">Fecha celebracion</label>
        <input type="text" name="" id="">
        <label class="labelSorteo">Presupuesto</label>
        <input type="text" name="" id="">
    </div>
</form>

Y este codigo css:

.formCompleto {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.formSorteo {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 20px;
  display: block;
  position: relative;
}

.formSorteo input {
  display: inline;
}

.formSorteo label {
  display: inline;
  position: absolute;
}

Y no se porque se me están juntando los labels con los inputs cuando quiero que los label queden encima de los input algo asi:

introducir la descripción de la imagen aquí

2 respuestas 2

1

Lo primero es que tienes flex-direction: column; cuando debería ser flex-direction: row; u omitir el valor ya que por default es row. Y el truco para que el input quede debajo del label es setearlo como display:block;, de esta manera ocupa toda la fila, obligando a que salte a la fila de abajo

Además, agrego unas pequeñas sugerencias a tu autorespuesta

1.- No necesitas un div debajo del form, el form puede actuar perfectamente como un contenedor

2.- No necesitas un div para contener el label+input, el label tambien puede actuar como un contenedor. Además, de esta manera te ahorras usar el atributo for, ya que el input al estar dentro del label queda automáticamente referenciado

.formSorteo {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 20px;
}
.formSorteo input{
  display:block;
}
<form class="formSorteo">
  <label class="labelSorteo">Nombre organizador
     <input type="text" name="" id="" />
  </label>

  <label class="labelSorteo">Fecha celebracion
     <input type="text" name="" id="" />
  </label>

  <label class="labelSorteo">Presupuesto
     <input type="text" name="" id="" />
  </label>
</form>

1

Finalmente conseguí resolverlo de la siguiente manera: Descubrí que la etiqueta label contiene un atributo llamado for que se encarga de hacer referencia al input gracias al atributo name, aparte tambien para poder gestionar mejor los labels y los inputs juntos tuve que añadir un contenedor div a cada uno de ellos; Con todos estos cambios el html quedara asi:

<form>
        <div class="formSorteo">
            <div>
                <label for="Nombre organizador" class="labelSorteo">Nombre organizador</label>
                <input type="text" name="Nombre organizador" id="">
            </div>
            <div>
                <label for="Fecha celebracion" class="labelSorteo">Fecha celebracion</label>
                <input type="text" name="Fecha celebracion" id="">
            </div>
            <div>
                <label for="Presupuesto" class="labelSorteo">Presupuesto</label>
                <input type="text" name="Presupuesto" id="">
            </div>
        </div>
    </form>

y ahora lo único que nos falta seria ajustar el css para que quede con la posicion correcta:

.formSorteo {
  background-color: #f0f0f0;
  padding: 9px 15px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  width: 80%; 
  margin: auto;
  gap: 15px;
}

.formSorteo div {
  display: flex;
  flex-direction: column; 
  gap: 5px;
}

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.