2

How can I horizontally align a form? For example:

<form>
<input type="email" placeholder="example@ravvel.com">
<div> 
<input class="enter" type="submit" value="Send"/> 
</div>
</form>

Will give boxes as such:

email
send

Whereas I want them to appear in this fashion:

email send
slandau
  • 23,528
  • 42
  • 122
  • 184
Marlon
  • 597
  • 2
  • 8
  • 17

9 Answers9

6

remove div tag like this :

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>
Tushar Ahirrao
  • 12,669
  • 17
  • 64
  • 96
3

Simple way:

<form> 
<input type="email" placeholder="example@ravvel.com"> 
<input class="enter" type="submit" value="Send"/>
</form>

More style-ish way:

<form> 
<div style="float:left"><input type="email" placeholder="example@ravvel.com"></div> 
<div style="float:left"><input class="enter" type="submit" value="Send"/></div> 
</form>
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • 3
    It's more clear and more compact. What could possibly be wrong with that? Shame on you for assuming your way of doing things is the only good way. – Blazemonger Aug 29 '11 at 13:33
  • Ever heard of separation of content and styling? inline styling is good possibly only for inline and other very **very** narrow list of cases, which this one isn't one of them. – Madara's Ghost Aug 29 '11 at 13:34
  • Also, since ``s are inline by default, `float` is not necessary. – Madara's Ghost Aug 29 '11 at 13:36
  • 2
    Of course I've heard of it. But he has a small form with exactly two inputs. Building a new stylesheet for two DIVs, if he doesn't already have one, is good form but hardly necessary. – Blazemonger Aug 29 '11 at 13:37
  • I disagree, sorry. And I believe it is a bad practice to pass on to new web developers, hence my -1 stands. – Madara's Ghost Aug 29 '11 at 13:40
  • There is a lot more to the code. I just put the shortest portion. Thank you both for your help though! You've been a great help. – Marlon Aug 29 '11 at 13:44
2

Get rid of your DIV. You don't need it.

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

You can add a float: left style to each div that wraps the form elements.

adarshr
  • 61,315
  • 23
  • 138
  • 167
0

Strangely, in my case, simply removing 'div' did not help. I have to explicitly put "float:left" to each input in order to get everything in one line. Hopefully it helps someone who falls in the same situation.

chfw
  • 4,502
  • 2
  • 29
  • 32
0

Add the CSS property display with the value inline to the DIV:

#yourdiv
{
  display: inline;
}
ComFreek
  • 29,044
  • 18
  • 104
  • 156
0

Well, simply put - if you use float:left on your div elements, it should align them horizontally and get you on your way.

<form>
    <input type="email" placeholder="example@ravvel.com" style="float:left;">
    <div> 
        <input class="enter" type="submit" value="Send" style="float:left;"/> 
    </div>
</form>
slandau
  • 23,528
  • 42
  • 122
  • 184
  • -1 no inline styling. Also it will cause trouble as you haven't floated the div itself, which is the source of the problem. A simpler solution would be to get rid of it altogether. – Madara's Ghost Aug 29 '11 at 13:38
0

If you want all fields inside a form aligned, you can add display:inline as a CSS rule to the containing elements. I generally like to use paragraph tags to separate each label+input tag, or an un ordered list. To update your example:

<form>
  <ul>
    <li><input type="text" type="email" placeholder="example@example.com" /></li>
    <li><input type="text" type="submit" value="send" /></li>
  </ul>
</form>

<style type="text/css" media="screen">
  form ul {
    list-style:none;
  }
  form li {
    display:inline;
  }
</style>

This will work for each field you add as a new list item.

agmcleod
  • 13,321
  • 13
  • 57
  • 96
  • -1. You just made his form vanish, good job. :). remove the `display: none;` from the `ul`. Also, consider removing the list altogether as the **default styling for `` is `display: inline;`** – Madara's Ghost Aug 29 '11 at 13:39
  • I've removed the -1 but note that your solution is still (although valid and acceptable) isn't the correct one. There is no need for the `ul` at all. See my first comment. – Madara's Ghost Aug 29 '11 at 14:34
  • 1
    True, but if you wish to add more fields, and labels later, this is easier to work with. It's definitely not the most semantic solution, but it's better than leaving input tags on their own. Fieldset is definitely the best wrapper. – agmcleod Aug 29 '11 at 16:18
  • Yes and labels can act as their own wrappers instead of list items (set them to blocks and they are beasts). – Madara's Ghost Aug 29 '11 at 16:19
  • 1
    Not to get into a semantic debate here, but generally it's better to keep a label tag to just contain the text, and use the for attribute to connect it to the field. Otherwise things like screen readers might have trouble interpreting what the label tag is saying. Write your html for what the content is about, as little about the looks as you can. CSS is king for presentation. – agmcleod Aug 29 '11 at 18:08
0
<input type="text"/>
<input type="submit"/>

Input elements are inline-block, meaning they're always on the same line, the reason why you got 2 lines, is because the div element is a block element, in order for it to be able to be aligned with other elements in the same "line", it must be floated, or positioned not relatively.

example

Itai Sagi
  • 5,537
  • 12
  • 49
  • 73