CODEWITHSUNDEEP
htmlcssinputalignment
Ryan Stortz
Ryan Stortz

Reputation: 393

Aligning html inputs on same line

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>

Upvotes: 28

Views: 97442

Answers (8)

Abdullah
Abdullah

Reputation: 1033

For me i used a div and put all inputs in div and used vertical-align:top; for div 

<div style="vertical-align:top">
        <span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
        <span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
        <input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
    </div>

Upvotes: 0

TheOne LuKcian
TheOne LuKcian

Reputation: 89

You can do something like this ( worked in my case ):

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

Here is a demo: http://jsfiddle.net/gn3qx6w6/1/

Upvotes: 0

Rohan Patil
Rohan Patil

Reputation: 2348

Just give float:left to the textarea

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

Upvotes: 1

Mike Sav
Mike Sav

Reputation: 15321

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.

Upvotes: 2

David
David

Reputation: 219096

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>

Upvotes: 3

ShaneBlake
ShaneBlake

Reputation: 11096

<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

Sure, it makes the CSS purists squirm, but it's certainly easy...

Upvotes: 0

Rondel
Rondel

Reputation: 4951

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.

Upvotes: 34

paulcol.
paulcol.

Reputation: 3000

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

or 

textarea,input.button{float:left;}

take your pick depending on which way your vertically challenged

Upvotes: 8

Related Questions