CODEWITHSUNDEEP
cssforms
Josh Martin
Josh Martin

Reputation: 65

Align form field and submit button on same line

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

https://jsfiddle.net/martonian/u41y9bng/2/

Upvotes: 2

Views: 8253

Answers (2)

DetchKing
DetchKing

Reputation: 185

The problem is simple : you put a div around the input and the button! the div is a block element (display is block ) so automatically it will go under the previous element!

Solution there are many solutions !

  • remove the div ! (if you don't need it)

  • use flex box

  • you could make your div display to an inline-block or inline element !

Codes:

-removing the div:(change only HTML)

<div class="tnp tnp-subscription">
<form method="post" action="http://www.buffettworld.com/bw18/?na=s" 
onsubmit="return newsletter_check(this)">

<input class="tnp-email" type="email" name="ne" placeholder="Enter your e- 
mail address" required>
<input class="tnp-submit" type="submit" value="Subscribe">
</form>
</div>

-second solution: adding flex to CSS,just add this to you css: he is a link: Flex Box

form{ /* it means all the elements inside form will be set one next to one */
  display:flex;
}

-third solution :changing the display of the div;add this code to the css

.tnp-field ,.tnp-field {
  display:inline-block;
}

Upvotes: 3

Gerard
Gerard

Reputation: 15786

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>

Upvotes: 2

Related Questions