Get two forms to display inline

Question

This doesnt work

Answer 1

Just use, display:inline-block . Example:

<form style ='display:inline-block;'>
 <input type = 'submit'/>
</form>
<form style ='display:inline-block;'>
  <input type = 'submit'/>
</form>

And you may also use HTML Table to do this forcefully. Example:

<table>
  <tr>
     <td>
       <form>
         <input type="submit" />
       </form>
     </td>
     <td>
       <form>
         <input type="submit" />
       </form>
     </td>
  </tr>
</table>

Answer 2

If I understand the question correctly, you can use display:inline-block;

form{
    width:200px;           //JUST FOR SHOW
    height:200px;          //JUST FOR SHOW
    background:red;        //JUST FOR SHOW
    display:inline-block;  
    margin:1em;            
}

Example: http://jsfiddle.net/jasongennaro/dn5NQ/3/

Obviously, you will need to rework the content of the forms... as you say.

Answer 3

an input button to display inline

If the buttons should be displayed inline, then you need to assign those styles to the inputs, not to the forms.

Answer 4

You should use quotes " for your attributes, and style the buttons inline as well as they are defined as block by default.

Answer 5

I think what you want is to display them side by side. You can do it using floats instead like so:

<form style ='float: left; padding: 5px;'>
akjfhdkjahj<br />
 <input type = 'submit'/>
</form>
<form style ='float: left; padding: 5px;'>
  aklfjas<br />
  <input type = 'submit'/>
</form>

But even that's not ideal. What would be best is to wrap each < form > in < div >s and use float in the div tag instead.