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=开发者_如何学Go"...">
<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.
form {
display: inline;
}
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.
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>
Or:
form {
float: left;
margin-right: 5px;
}
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;
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.
精彩评论