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:

<

Solution 1:

Here is the Answer

CSS

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

HTML

<divid="outer"><divclass="inner"><buttontype="submit"class="msgBtn"onClick="return false;" >Save</button></div><divclass="inner"><buttontype="submit"class="msgBtn2"onClick="return false;">Publish</button></div><divclass="inner"><buttonclass="msgBtnBack">Back</button></div></div>

Fiddle

Solution 2:

Do something like this,

HTML :

<divstyle="width:500px;"><buttontype="submit"class="msgBtn"onClick="return false;" >Save</button><buttontype="submit"class="msgBtn2"onClick="return false;">Publish</button><buttonclass="msgBtnBack">Back</button></div>

CSS :

divbutton{
    display:inline-block;
}

Fiddle Demo

Or

HTML :

<divstyle="width:500px;"id="container"><div><buttontype="submit"class="msgBtn"onClick="return false;" >Save</button></div><div><buttontype="submit"class="msgBtn2"onClick="return false;">Publish</button></div><div><buttonclass="msgBtnBack">Back</button></div></div>

CSS :

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

Fiddle Demo

Solution 3:

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.

<divstyle="width:500px;"><buttontype="submit"class="msgBtn"onClick="return false;" >Save</button><buttontype="submit"class="msgBtn2"onClick="return false;">Publish</button><buttonclass="msgBtnBack">Back</button></div>

Solution 4:

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

CSS:

.btn{

   float:left;
}

HTML:

<buttontype="submit"class="btn"onClick="return false;" >Save</button><buttontype="submit"class="btn"onClick="return false;">Publish</button><buttonclass="btn">Back</button>

Solution 5:

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

<button type="submit"class="msgBtn" onClick="return false;" >Save</button>
<buttontype="submit"class="msgBtn2"onClick="return false;">Publish</button><buttonclass="msgBtnBack">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.

Share