Aligning html inputs on same line

Question

Can somebody give a simple solution as to how to align form inputs on the same line, for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?

ex:

<style type='text/css'>
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>

Solution 1

Have you tried playing with the vertical-align css property?

vertical-align:top;

That way everything will look consistent and you won't have to play with margins.

Solution 2

textarea,input.button{display:inline-block;}

or

textarea,input.button{float:left;}

take your pick depending on which way your vertically challenged

Solution 3

Adding a vertical-align seems to work for me:

<style type='text/css'>
  form{display:inline;}
  textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
  input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>

Solution 4

You can usually use display:inline-block; or float:left; Are you wanting items to be alighed at the top or bottom?

In your example you haven't closed the input type, it should be type='button' - you're missing an apos.

Solution 5

Just give float:left to the textarea

http://jsfiddle.net/2qdJc/2/

View more solutions