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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>  
Attachments
How it looks now.
How it looks now.
test.jpg (12.62 KiB) Viewed 4448 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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?
Post Reply