Skip to main content
título editado
Enlace
user128299
user128299

¿Cómo coloco elcolocar un botón de Enviar a la derecha delen un formulario?

<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>

Aquí lo que tengo en css:

.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>
.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>

Aquí lo que tengo en css:

.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;

}

.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>
 

Origen Enlace
santizic
  • 81
  • 1
  • 4
  • 9

¿Cómo coloco el botón de Enviar a la derecha del formulario?

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.

<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>

Aquí lo que tengo en css:

.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;

}

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.