CODEWITHSUNDEEP
htmlcss
elvispt
elvispt

Reputation: 4942

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

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.

Upvotes: 19

Views: 24913

Answers (6)

percy
percy

Reputation: 25

This only worked for me when I put < form style="display: inline-block;"/> directly into the html. When I tried putting it into the style sheet:

.form
{display: inline-block;}

it didn't work. I had to put it into the html.

Upvotes: 0

HaroldtheSquare
HaroldtheSquare

Reputation: 66

If display:inline isn't working, it might be because a parent element has a width that is too small to hold both next to each other, and that can cause the form elements to break onto separate lines. Try adding this rule to the style for the container that holds the two forms:

white-space: nowrap;

Upvotes: 2

basd
basd

Reputation: 31

This is an old thread, so I probably am not helping anyone, but here is my suggestion. Many programmers avoid tables and therefore do not like my method, but I solve this problem as follows:

<table><tr><td><form></form></td><td><form></form></td></tr></table>

Upvotes: 3

Šime Vidas
Šime Vidas

Reputation: 185883

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.

Upvotes: 8

stealthyninja
stealthyninja

Reputation: 10371

Or:

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

Upvotes: 2

Vivien Barousse
Vivien Barousse

Reputation: 20875

form {
    display: inline;
}

Upvotes: 35

Related Questions