2

He estado probando en poder acomodar texto, al lado de un checkbox. Pero no logro que este se posicione en donde quiero. Probé con position: absolute; Pero si hago esto y después achico la pantalla se me rompe el diseño. Por lo que estoy en busca de una solución donde quede el checkbox, y el texto al lado, pero sin usar absolute. Después mi idea es posicionar el checkbox junto con el texto para que quede alineado verticalmente con las otras partes del formulario.

.S-Formulario {
  background-color: #Bc6c25;
  border: #572b05 solid;
  display: flex;
  padding: 5%;
  height: 70%;
  width: 60%;
  border-radius: 2%;
  margin: 5% auto;
}

.Formulario {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.Formulario input, select {
  margin:1%;
  height: 10%;
  width: 100%;
}

.Formulario textarea {
  margin: 1%;
  width: 100%;
  height: 30%;
}

#checkbox{
  width: 40%;
}
<section class="S-Formulario"><!-- Formulario -->
  <form action="" method="" enctype="" class="Formulario">
    <input type="text" name="" id="Nombre" placeholder="*Ingrese su nombre" required>
    <input type="email" name="" id="Mail" placeholder="*Ingrese su mail" required>
    <select name="" id="Tipo de consulta" required>
      <option value="1" disabled selected>*Tipo de consulta o comentario</option>

      <option value="2">Información productos</option>

      <option value="3">Información de venta</option>

      <option value="4">Comentario</option>

      <option value="5">otro</option>

    </select>
    <textarea name="" id="" cols="30" rows="10" placeholder="*Ingrese su Comentario/Consulta" required></textarea>
    <input type="checkbox" name="opcion" id="checkbox">
    <p class="Text-checkbox">
      Quiero recibir información sobre las novedades de Dernocua
    </p>
    <input type="submit" value="enter">
  </form>
</section>

introducir la descripción de la imagen aquí

1 respuesta 1

2

Primero encerré en un div padre a tus 2 elementos, que son tu input y el texto. Al div padre vamos a llamar a su clase contenido:

<div class="contenido">
  <p class="Text-checkbox">
    Quiero recibir información sobre las novedades de Dernocua
  </p>
  <input type="checkbox" name="opcion" id="checkbox">
</div>

Y esa clase contenido vamos a indicar que sean flexible sus elementos de adentro para que se posicionen uno al lado del otro, con la propiedad display: flex;:

.contenido {
  display: flex;
}

Luego justificamos los elementos para que estén posicionados uno en cada lado, dando un espacio en el medio, usando justify-content: space-between;:

.contenido {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Obteniendo este resultado:

introducir la descripción de la imagen aquí

Ahora para arreglar el tema de los anchos, vamos a darle un ancho a cada uno, así:

.Text-checkbox {
  width: 90%;
}

#checkbox {
  width: 10%;
}

Y el resultado final vendría a ser el siguiente:

introducir la descripción de la imagen aquí

Código completo:

.S-Formulario {
  background-color: #Bc6c25;
  border: #572b05 solid;
  display: flex;
  padding: 5%;
  height: 70%;
  width: 60%;
  border-radius: 2%;
  margin: 5% auto;
}

.Formulario {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.Formulario input, select {
  margin:1%;
  height: 30px;
  width: 100%;
}

.Formulario textarea {
  margin: 1%;
  width: 100%;
  height: 30%;
}

.contenido {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Text-checkbox {
  width: 90%;
}

#checkbox {
  width: 10%;
}
<section class="S-Formulario"><!-- Formulario -->
  <form action="" method="" enctype="" class="Formulario">
    <input type="text" name="" id="Nombre" placeholder="*Ingrese su nombre" required>
    <input type="email" name="" id="Mail" placeholder="*Ingrese su mail" required>
    <select name="" id="Tipo de consulta" required>
      <option value="1" disabled selected>*Tipo de consulta o comentario</option>
      <option value="2">Información productos</option>
      <option value="3">Información de venta</option>
      <option value="4">Comentario</option>
      <option value="5">otro</option>
    </select>
    <textarea name="" id="" cols="30" rows="10" placeholder="*Ingrese su Comentario/Consulta" required></textarea>
    <div class="contenido">
      <p class="Text-checkbox">
        Quiero recibir información sobre las novedades de Dernocua
      </p>
      <input type="checkbox" name="opcion" id="checkbox">
    </div>
    <input type="submit" value="enter">
  </form>
</section>

1
  • Gracias, me funcionó!
    – Franco
    Commented el 2 mar. 2023 a las 19:55

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.