How can I horizontally align a form?

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

---

remove div tag like this :

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

---

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>

---

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>

---

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

---

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

#yourdiv
{
  display: inline;
}

---

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>

---

<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

---

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.

---

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.