How can I horizontally align a form?

Question

How can I horizontally align a form? For example:

<form>
<input type="email" placeholder="[email protected]">
<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

Solution 1

remove div tag like this :

<form>
<input type="email" placeholder="[email protected]">
<input class="enter" type="submit" value="Send"/> 
</form>

Solution 2

Simple way:

<form> 
<input type="email" placeholder="[email protected]"> 
<input class="enter" type="submit" value="Send"/>
</form>

More style-ish way:

<form> 
<div style="float:left"><input type="email" placeholder="[email protected]"></div> 
<div style="float:left"><input class="enter" type="submit" value="Send"/></div> 
</form>

Solution 3

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

<form>
<input type="email" placeholder="[email protected]">
<input class="enter" type="submit" value="Send"/> 
</form>

Solution 4

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

View more solutions

Comments

[Blazemonger]

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.

[Madara's Ghost]

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]

Also, since <input>s are inline by default, float is not necessary.

[Blazemonger]

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.

[Madara's Ghost]

-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]

-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 <input> is display: inline;

[Madara's Ghost]

I disagree, sorry. And I believe it is a bad practice to pass on to new web developers, hence my -1 stands.

[Marlon]

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.

[Madara's Ghost]

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.

[agmcleod]

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.

[Madara's Ghost]

Yes and labels can act as their own wrappers instead of list items (set them to blocks and they are beasts).

[agmcleod]

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.