How to display 3 buttons on the same line in css

I want to display 3 buttons on the same line in html. I tried two options: This one:

 <div> <div><button type="submit" onClick="return false;" >Save</button></div> <div style ="float: none; width: 130px"><button type="submit" onClick="return false;">Publish</button></div> <div style ="float: right; width: 130px"><button>Back</button></div> </div> 

And this one:

 <p><button type="submit" onClick="return false;" >Save</button></p> <p style ="float: none; width: 130px"><button type="submit" onClick="return false;">Publish</button></p> <p style ="float: right; width: 130px"><button>Back</button></p> 

For the second option I used a styling for the paragraph:

<style> p {display:inline} </style> 

Sadly, none of them were ok, and I can't seem to find out any other option. The first and second button are displayed on same line, but the third is displayed lower... Can you help me?

6 Answers

Here is the Answer

CSS

#outer { width:100%; text-align: center; } .inner { display: inline-block; } 

HTML

<div> <div><button type="submit" onClick="return false;" >Save</button></div> <div><button type="submit" onClick="return false;">Publish</button></div> <div><button>Back</button></div> </div> 

Fiddle

Do something like this,

HTML :

<div> <button type="submit" onClick="return false;" >Save</button> <button type="submit" onClick="return false;">Publish</button> <button>Back</button> </div> 

CSS :

div button{ display:inline-block; } 

Fiddle Demo

Or

HTML :

<div> <div><button type="submit" onClick="return false;" >Save</button></div> <div><button type="submit" onClick="return false;">Publish</button></div> <div><button>Back</button></div> </div> 

CSS :

#container div{ display:inline-block; width:130px; } 

Fiddle Demo

This will serve the purpose. There is no need for any divs or paragraph. If you want the spaces between them to be specified, use margin-left or margin-right in the css classes.

<div> <button type="submit" onClick="return false;" >Save</button> <button type="submit" onClick="return false;">Publish</button> <button>Back</button> </div> 

You need to float all the buttons to left and make sure its width to fit within outer container.

CSS:

.btn{ float:left; } 

HTML:

 <button type="submit" onClick="return false;" >Save</button> <button type="submit" onClick="return false;">Publish</button> <button>Back</button> 

If you are using bootstrap then call a simple btn-group class in the outer div

<div> <a href="">View</a> <a href="">Edit</a> <a href="">Delete</a> </div> 

The following will display all 3 buttons on the same line provided there is enough horizontal space to display them:

<button type="submit" onClick="return false;" >Save</button> <button type="submit" onClick="return false;">Publish</button> <button>Back</button> // Note the lack of unnecessary divs, floats, etc. 

The only reason the buttons wouldn't display inline is if they have had display:block applied to them within your css.