如何在CSS的同一行上显示3个按钮 [英] How to display 3 buttons on the same line in css

问题描述

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

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> 

还有一个:

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

推荐答案

这是答案

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>

小提琴

这篇关于如何在CSS的同一行上显示3个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！