Page 1 of 1

How do you line up Input Text/Submit elements perfectly?

Posted: Thu Sep 17, 2015 6:01 am
by simonmlewis
I need to get this input box and submit button to line up horizontally, and there seems to be a lot online about this issue with the white space above the Submit button.

This is mine. What am I doing wrong? It needs it so the top and bottom of the 'GO' button line up perfect with the input box.

Code: Select all

<style>

.logobox_search
{
float: left;
width: 295px;
margin-left: 56px;
margin-top: 40px;
font-size: 25px;
color: #ffffff;
text-align: center;
}

.logobox_search input
{
border: 2px solid #153878;
font-size: 23px;
text-align: center;
padding: 8px;
margin-bottom: 10px;
}

.logobox_search input[type="submit"]
{
background-color:  #153878;
color: #ffffff;
font-size: 21px;
text-align: center;
padding: 8px;
margin-bottom: 10px;
}
</style>

<div class='logobox_search' >
      <form method='GET' action='/index.php'>
  <input type='text' name='search' placeholder='Search Jobs'><input type='submit' value='Go'>
  </form>
  <i class="fa fa-phone fa-lg"></i> 00000 000 000
    </div>  

Re: How do you line up Input Text/Submit elements perfectly?

Posted: Thu Sep 17, 2015 7:23 am
by Celauran
http://codepen.io/anon/pen/GpZWqJ?editors=110

That's what you get with just the code provided. What else is wrapping this and what other rules are affecting it?