2

Tengo este formulario, pero siento que el lado izquierdo esta muy sobrecargado, por lo que quiero que el botón de "enviar" este en la derecha, y no en la izquierda.

.campo {
    display: flex;
    margin-bottom: 2rem;
}

.campo__label {
    flex: 0 0 9rem;
    text-align: right;
    padding-right: 2rem;
    font-weight: 700;
}

.campo__field {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--gris);
    border-radius: .5rem;
}

.campo__field--textarea {
    height: 20rem;

}
<form class="formulario">
    <div class="campo">
        <label class="campo__label" for="nombre">Nombre</label>
        <input class="campo__field" type="text" placeholder="Tu Nombre" id="nombre">
    </div>
    <div class="campo">
        <label class="campo__label" for="email">E-mail</label>
        <input class="campo__field"  type="email" placeholder="Tu E-mail" id="email">
    </div>
    <div class="campo">
        <label class="campo__label" for="mensaje">Mensaje</label>
        <textarea class="campo__field campo__field--textarea" id="mensaje"></textarea>
    </div>
    <div class="campo">
        <div class="campo__boton">
            <input type="submit" value="enviar" class="boton boton--primario">
        </div>
    </div>
</form>

Ya intente con justify-content: right;, con margin-rigth: 0;, con float: right;, y ya ni me acuerdo con que mas. Debe ser algo simple pero simplemente no encuentro la solución.

2 respuestas 2

4

Lo solucionas de esta forma:

.campo:last-child {
    justify-content: flex-end;
}
1
  • Pero que... Eso fue lo primero que intenté y no me funcionó. Le había agregado una tercera clase al botón y le había dado justify-content: flex-end; y no me había funcionado. ¿Que hice mal? Hice lo mismo solo que seleccionado el botón de otra forma.
    – santizic
    Commented el 3 mar. 2021 a las 6:53
1

Puedes intentar ponerle un margin-left de 28em por ejemplo al 'boton' respecto a su div para moverlo a la derecha con CSS... o un padding-left al div campo_boton.

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.