CODEWITHSUNDEEP
htmlcss
algorithmicCoder
algorithmicCoder

Reputation: 6789

Get two forms to display inline

This doesnt work

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

I want two forms that submit to different scripts and each have an input button to display inline.

I want to style it inline as someone else will make more permanent changes to the main CSS file what am I doing wrong?

Upvotes: 8

Views: 20483

Answers (5)

anazitit&#237;s gn&#243;sis
anazitit&#237;s gn&#243;sis

Reputation: 63

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>

Upvotes: 2

checkenginelight
checkenginelight

Reputation: 1146

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.

Upvotes: 19

Fran&#231;ois Feugeas
Fran&#231;ois Feugeas

Reputation: 208

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

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 4

feeela
feeela

Reputation: 29932

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.

Upvotes: 0

Related Questions