I feel that I'm really missing something simple, but I have tried many things and can't seem to align the submit button on the right side of the input box on the same line. It is on the next line below the text box.
This comes from a wordpress plugin where I can add some additional CSS, so some of the CSS isn't being pulled in my jfiddle example, but I think you have what you need.
HTML
<div class="tnp tnp-subscription">
<form method="post" action="http://www.buffettworld.com/bw18/?na=s" onsubmit="return newsletter_check(this)">
<div class="tnp-field tnp-field-email"><input class="tnp-email" type="email" name="ne" placeholder="Enter your e-mail address" required></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe">
</div>
</form>
</div>
CSS
.tnp-subscription {
font-size: 13px;
display: block;
margin: 15px auto;
max-width: 500px;
width: 100%;
}
.tnp-subscription input.tnp-submit {
background-color: #6acbdc;;
color: #fff;
width: auto;
height: auto;
}
My prefered solution would be using a flexbox for the form.
form {
display: flex;
align-items: center; /* Vertical alignment */
}
.tnp-subscription {
font-size: 13px;
display: block;
margin: 15px auto;
max-width: 500px;
width: 100%;
}
.tnp-subscription input.tnp-submit {
background-color: #6acbdc;
;
color: #fff;
width: auto;
height: auto;
}<div class="tnp tnp-subscription">
<form method="post" action="http://www.buffettworld.com/bw18/?na=s" onsubmit="return newsletter_check(this)">
<div class="tnp-field tnp-field-email"><input class="tnp-email" type="email" name="ne" placeholder="Enter your e-mail address" required></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe">
</div>
</form>
</div>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras