How to display 3 buttons on the same line in css

css, html, stylesheet

Solution

Here is the Answer

CSS

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

HTML

<div id="outer">
  <div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
  <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
  <div class="inner"><button class="msgBtnBack">Back</button></div>
</div>

Fiddle

Problem

I want to display 3 buttons on the same line in html. I tried two options: This one: ``` <div style="width:500px;"> <div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div> <div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div> <div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div> </div> ``` And this one: ``` <p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p> <p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p> <p style ="float: right; width: 130px"><button class="msgBtnBack">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?

Original source