I've got two form buttons like this:
<input type="submit" value="Post"/> <input type="button" value="Cancel"/>
They are displaying one below each other.
How can I display them inline?
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
style="float:left;" in the one and style="float:right;" in the other... The 2nd example will also center your both forms on the screen.
You can have as many forms as you need on a HTML page. As long as your script for processing the forms knows which form is which and processes them accordingly. You may have multiple scripts, one for each form.
The most common and traditional way (inline-block) The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
<span style="display: inline;">
<input type="submit" value="Post"/> <input type="button" value="Cancel"/>
</span>
http://jsfiddle.net/UQ7xv/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With