¿Cómo alinear el botón a la altura de los input del formulario?

publicado por: Anonymous

os explico, tengo lo que seguramente sera un problema bastante simple, pero que no le encuentro las solucion.
Tengo el siguiente codigo asi

_x000D_

_x000D_

.row {_x000D_
    width: 100%;_x000D_
    position: relative;_x000D_
    float: left;_x000D_
_x000D_
}_x000D_
.col7 {_x000D_
        width: 100%;_x000D_
        float: left;_x000D_
    }_x000D_
_x000D_
.border_right {_x000D_
border-right: 1px solid;_x000D_
-moz-border-image: -moz-linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);_x000D_
-webkit-border-image: -webkit-linear-gradient( #ffffff  0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% ,  #000000 100%);_x000D_
border-image: linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);_x000D_
border-image-slice: 1;_x000D_
font-family: 'serif';_x000D_
}_x000D_
_x000D_
.footer-title h1 {_x000D_
    text-align: left;_x000D_
    font-size: 2em;_x000D_
    border-bottom: 1px solid black;_x000D_
    padding: 1em;_x000D_
}_x000D_
_x000D_
.formular {_x000D_
    margin: 2em 0em 0 2em;_x000D_
}_x000D_
_x000D_
.f-form {_x000D_
    margin: 1em 0em 1em 2em;_x000D_
_x000D_
}_x000D_
_x000D_
.form-title {_x000D_
    float: left;_x000D_
    width: 59%;_x000D_
    border-right: 1px solid;_x000D_
    margin-top: 2em;_x000D_
}_x000D_
_x000D_
.form-title h2 {_x000D_
    margin: 1em;_x000D_
    color: #5aa8c4;_x000D_
}_x000D_
_x000D_
.cont-section {_x000D_
    float: left;_x000D_
    width: 40%;_x000D_
    margin-top: 2em;_x000D_
}_x000D_
_x000D_
#contact .block1, .block2, .block3 {_x000D_
    margin:0em 0em 2em 0em;_x000D_
}_x000D_
_x000D_
#contact h3 {_x000D_
    color: #5aa8c4;_x000D_
    font-size: 1.1em;_x000D_
}_x000D_
_x000D_
#contact p {_x000D_
    font-size: 0.9em;_x000D_
    line-height: 1.2em;_x000D_
    font-weight: 600;_x000D_
}_x000D_
_x000D_
#contact a {_x000D_
    color: black;_x000D_
 }_x000D_
_x000D_
.contactform input {_x000D_
    padding: 0.8em 0em 0.8em 2em;_x000D_
    width: 81%;_x000D_
 }_x000D_
_x000D_
.contactform label {_x000D_
    margin-left: 1em;_x000D_
    font-size: 1.2em;_x000D_
 }_x000D_
_x000D_
.contactform select {_x000D_
    padding: 0.5em 2em 0.5em 2em;_x000D_
    text-align: center;_x000D_
    width: 86%;_x000D_
    background: white;_x000D_
    background: -webkit-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: -o-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: -moz-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: linear-gradient(white, #d1d1d1 30%);_x000D_
    border: none;_x000D_
    font-weight: 600;_x000D_
    font-size: 1em;_x000D_
 }_x000D_
_x000D_
.contactform p {_x000D_
    margin-bottom: 1em;_x000D_
}_x000D_
_x000D_
_x000D_
.wpcf7-submit {_x000D_
    width: 30% !important;_x000D_
    background-color: #3c95b8;_x000D_
    color: white;_x000D_
    font-weight: 600;_x000D_
    font-size: 1.1em;_x000D_
    padding: 0.5em !important;_x000D_
}_x000D_
_x000D_
.wpcf7-textarea {_x000D_
    width: 85%;_x000D_
}_x000D_
_x000D_
.wpcf7-form-control {_x000D_
    margin-bottom: 1em;_x000D_
}_x000D_
_x000D_
.wpp-list li {_x000D_
    list-style: inside square;_x000D_
}_x000D_
_x000D_
.wpcf7 input[type="submit"] {_x000D_
_x000D_
}

_x000D_

 <div class="col7">_x000D_
                            <div>_x000D_
                                <div class="contactform row border_right">_x000D_
<div class="formular">_x000D_
                                        <h2>Kontaktformular</h2>_x000D_
        							     <div class="f-form"><div role="form" class="wpcf7" id="wpcf7-f59-o1" dir="ltr" lang="de-DE">_x000D_
<div class="screen-reader-response"></div>_x000D_
<form action="/test/fitnesspedia_neu/wp-content/themes/fitnesspedia/query_handler.php#wpcf7-f59-o1" method="post" class="wpcf7-form" novalidate="novalidate">_x000D_
<div style="display: none;">_x000D_
<input name="_wpcf7" value="59" type="hidden">_x000D_
<input name="_wpcf7_version" value="4.9.1" type="hidden">_x000D_
<input name="_wpcf7_locale" value="de_DE" type="hidden">_x000D_
<input name="_wpcf7_unit_tag" value="wpcf7-f59-o1" type="hidden">_x000D_
<input name="_wpcf7_container_post" value="0" type="hidden">_x000D_
</div>_x000D_
<p><label> Betreff / Thema:*<br>_x000D_
    <span class="wpcf7-form-control-wrap Betreff"><input name="Betreff" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span> </label></p>_x000D_
<p><label> <strong>Ihre Nachricht:*</strong><br>_x000D_
   <span class="wpcf7-form-control-wrap textarea-200"><textarea name="textarea-200" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span> </label></p>_x000D_
<p><label> Meine Nachricht enthält:* (bitte auswählen)<br>_x000D_
<span class="wpcf7-form-control-wrap menu-682"><select name="menu-682" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Verbesserungsvorschlag">Verbesserungsvorschlag</option><option value="Infos">Infos</option></select></span></label></p>_x000D_
<p><span class="wpcf7-form-control-wrap nameUser"><input name="nameUser" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Name" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap adresse"><input name="adresse" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Adresse" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap plz"><input name="plz" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="PLZ, Stadt" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap telefon"><input name="telefon" value="Telefon" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap email"><input name="email" value="Email" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></p>_x000D_
<p><input value="Abschicken" class="wpcf7-form-control wpcf7-submit" type="submit"></p>_x000D_
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div>_x000D_
                                    </div>_x000D_
                                    </div>_x000D_
                                    </div>

_x000D_

_x000D_

_x000D_

Y lo que quiero es que el boton de envio quede justo debajo de el de email, pero a la derecha. Pero no encuentro la solucion, por que cuando disminuyo la pantalla se rueda bastante.
Aquì os dejo un enlace a jsfiddle
Gracias y un saludo

solución

Espero sea lo que buscas saludos

_x000D_

_x000D_

.row {_x000D_
    width: 100%;_x000D_
    position: relative;_x000D_
    float: left;_x000D_
_x000D_
}_x000D_
.col7 {_x000D_
        width: 100%;_x000D_
        float: left;_x000D_
    }_x000D_
_x000D_
.border_right {_x000D_
border-right: 1px solid;_x000D_
-moz-border-image: -moz-linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);_x000D_
-webkit-border-image: -webkit-linear-gradient( #ffffff  0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% ,  #000000 100%);_x000D_
border-image: linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);_x000D_
border-image-slice: 1;_x000D_
font-family: 'serif';_x000D_
}_x000D_
_x000D_
.footer-title h1 {_x000D_
    text-align: left;_x000D_
    font-size: 2em;_x000D_
    border-bottom: 1px solid black;_x000D_
    padding: 1em;_x000D_
}_x000D_
_x000D_
.formular {_x000D_
  padding:40px; /*codigo nuevo*/_x000D_
}_x000D_
/*nuevo codigo*/_x000D_
*{_x000D_
  margin: 0px;_x000D_
  box-sizing: border-box;_x000D_
}_x000D_
/*nuevo codigo*/_x000D_
.f-form {_x000D_
    width:100%;/*codigo nuevo*/_x000D_
_x000D_
}_x000D_
_x000D_
.form-title {_x000D_
    float: left;_x000D_
    width: 59%;_x000D_
    border-right: 1px solid;_x000D_
    margin-top: 2em;_x000D_
}_x000D_
_x000D_
.form-title h2 {_x000D_
    margin: 1em;_x000D_
    color: #5aa8c4;_x000D_
}_x000D_
_x000D_
.cont-section {_x000D_
    float: left;_x000D_
    width: 40%;_x000D_
    margin-top: 2em;_x000D_
}_x000D_
_x000D_
#contact .block1, .block2, .block3 {_x000D_
    margin:0em 0em 2em 0em;_x000D_
}_x000D_
_x000D_
#contact h3 {_x000D_
    color: #5aa8c4;_x000D_
    font-size: 1.1em;_x000D_
}_x000D_
_x000D_
#contact p {_x000D_
    font-size: 0.9em;_x000D_
    line-height: 1.2em;_x000D_
    font-weight: 600;_x000D_
}_x000D_
_x000D_
#contact a {_x000D_
    color: black;_x000D_
 }_x000D_
_x000D_
.contactform input {_x000D_
    padding: 0.8em 0em 0.8em 2em;_x000D_
    width: 100%;/*codigo nuevo*/_x000D_
 }_x000D_
_x000D_
.contactform label {_x000D_
width:100%;/*codigo nuevo*/_x000D_
    margin-left: 1em;_x000D_
    font-size: 1.2em;_x000D_
 }_x000D_
_x000D_
.contactform select {_x000D_
    padding: 0.5em 2em 0.5em 2em;_x000D_
    text-align: center;_x000D_
    width: 100%;/*codigo nuevo*/_x000D_
    background: white;_x000D_
    background: -webkit-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: -o-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: -moz-linear-gradient(white, #d1d1d1 30%);_x000D_
    background: linear-gradient(white, #d1d1d1 30%);_x000D_
    border: none;_x000D_
    font-weight: 600;_x000D_
    font-size: 1em;_x000D_
 }_x000D_
_x000D_
.contactform p {_x000D_
    margin-bottom: 1em;_x000D_
   width: calc(100% - 20px);/*codigo nuevo*/_x000D_
  margin: 10px;/*codigo nuevo*/_x000D_
}_x000D_
/*codigo nuevo*/_x000D_
.contactform p.con-btn {_x000D_
  display:flex;_x000D_
  align-items: center;_x000D_
  justify-content: flex-end;_x000D_
}_x000D_
/*codigo nuevo*/_x000D_
.wpcf7-submit {_x000D_
    width: 30% !important;_x000D_
    background-color: #3c95b8;_x000D_
    color: white;_x000D_
    font-weight: 600;_x000D_
    font-size: 1.1em;_x000D_
    padding: 0.5em !important;_x000D_
}_x000D_
_x000D_
.wpcf7-textarea {_x000D_
    width:100%;_x000D_
}_x000D_
_x000D_
.wpcf7-form-control {_x000D_
    margin-bottom: 1em;_x000D_
}_x000D_
_x000D_
.wpp-list li {_x000D_
    list-style: inside square;_x000D_
}_x000D_
_x000D_
.wpcf7 input[type="submit"] {_x000D_
_x000D_
}

_x000D_

<div class="col7">_x000D_
                            <div>_x000D_
                                <div class="contactform row border_right">_x000D_
<div class="formular">_x000D_
                                        <h2>Kontaktformular</h2>_x000D_
        							     <div class="f-form"><div role="form" class="wpcf7" id="wpcf7-f59-o1" dir="ltr" lang="de-DE">_x000D_
<div class="screen-reader-response"></div>_x000D_
<form action="/test/fitnesspedia_neu/wp-content/themes/fitnesspedia/query_handler.php#wpcf7-f59-o1" method="post" class="wpcf7-form" novalidate="novalidate">_x000D_
<div style="display: none;">_x000D_
<input name="_wpcf7" value="59" type="hidden">_x000D_
<input name="_wpcf7_version" value="4.9.1" type="hidden">_x000D_
<input name="_wpcf7_locale" value="de_DE" type="hidden">_x000D_
<input name="_wpcf7_unit_tag" value="wpcf7-f59-o1" type="hidden">_x000D_
<input name="_wpcf7_container_post" value="0" type="hidden">_x000D_
</div>_x000D_
<p><label> Betreff / Thema:*<br>_x000D_
    <span class="wpcf7-form-control-wrap Betreff"><input name="Betreff" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span> </label></p>_x000D_
<p><label> <strong>Ihre Nachricht:*</strong><br>_x000D_
   <span class="wpcf7-form-control-wrap textarea-200"><textarea name="textarea-200" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span> </label></p>_x000D_
<p><label> Meine Nachricht enthält:* (bitte auswählen)<br>_x000D_
<span class="wpcf7-form-control-wrap menu-682"><select name="menu-682" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Verbesserungsvorschlag">Verbesserungsvorschlag</option><option value="Infos">Infos</option></select></span></label></p>_x000D_
<p><span class="wpcf7-form-control-wrap nameUser"><input name="nameUser" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Name" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap adresse"><input name="adresse" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Adresse" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap plz"><input name="plz" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="PLZ, Stadt" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap telefon"><input name="telefon" value="Telefon" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span><br>_x000D_
<span class="wpcf7-form-control-wrap email"><input name="email" value="Email" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></p>_x000D_
_x000D_
<!-- agrego classe al contenedor p -->_x000D_
<p class="con-btn"><input value="Abschicken" class="wpcf7-form-control wpcf7-submit" type="submit"></p>_x000D_
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div>_x000D_
                                    </div>_x000D_
                                    </div>_x000D_
                                    </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *