Prevent <form> line break between two <form> tags

Question

Hi.

I want to prevent line breaks between two forms I have.

So basically:

<form action="...">
<input type="submit" />
</form>
LINE BREAK HERE
<form action="...">
<input type="submit" />
</form>

I want to remove the line break. I want the input buttons to be on the same line, like a menu.

Answer 1

form {
    display: inline;
}

Answer 2

Or:

form {
    float: left;
    margin-right: 5px;
}

Answer 3

I think this is the correct solution:

form { display: inline-block; }

The inline-block value is used for the purpose of laying out native block-level elements inline. Those elements will still remain blocks.

Changing the model for an element from block to inline is a radical move because it may mess things up depending on what the contents of the element are.

For this particular issue, using inline-block is the way to go.