html - css如何在同一行显示3个按钮

Question

我想在 html 的同一行上显示 3 个按钮。我尝试了两种选择: 这个:

    <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> 

还有这个:

    <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>

对于第二个选项，我为段落使用了样式:

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

可悲的是，他们都不好，而且我似乎找不到任何其他选择。第一个和第二个按钮显示在同一行，但第三个按钮显示在下方...... 你能帮帮我吗？

Answer 1

答案在这里

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