如何在css中的同一行显示3个按钮答案

【问题标题】：How to display 3 buttons on the same line in css如何在css中的同一行显示3个按钮
【发布时间】：2014-02-18 01:13:47
【问题描述】：

我想在 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>

遗憾的是，它们都没有问题，我似乎找不到任何其他选择。第一个和第二个按钮显示在同一行，但第三个显示在下方... 你能帮帮我吗？

【问题讨论】：

将它们全部向左浮动，并确保它们所在的 div 或容器的宽度大于所有按钮的总宽度
将按钮放在div 或p 标记中是否有原因？
jsfiddle.net/LEn9R 将它们全部向左浮动。 p 标签代表段落，显然 2 个段落不应该在同一行，所以避免使用 p。
@putvande 不是真的，我想我会需要它，但它现在没用......
去掉所有p标签就可以了。

标签： html css stylesheet

【解决方案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

【讨论】：

+1 ：但是将inline-block class 分配给按钮会是一个更好的主意，而不是将它们包装在类中:)
3 年后仍然是一个非常好的答案！谢谢你

【解决方案2】：

做这样的事情，

HTML：

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

CSS：

div button{
    display:inline-block;
}

Fiddle Demo

或者

HTML：

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

CSS：

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

Fiddle Demo

【讨论】：

不正确的display:inline; 将消除设置按钮高度和宽度样式的可能性！！

【解决方案3】：

这将达到目的。不需要任何 div 或段落。如果要指定它们之间的空格，请在 css 类中使用 margin-left 或 margin-right。

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

【讨论】：

【解决方案4】：

您需要将所有按钮浮动到左侧并确保其宽度适合外部容器。

CSS：

.btn{

   float:left;
}

HTML：

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

【讨论】：

【解决方案5】：

如果有足够的水平空间来显示它们，以下将在同一行显示所有 3 个按钮：

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

按钮不会内联显示的唯一原因是它们是否在您的 CSS 中应用了 display:block。

【讨论】：

【解决方案6】：

如果您使用的是引导程序，则在外部 div 中调用一个简单的 btn-group 类

<div class="btn-group">
  <a href="">View</a>
  <a href="">Edit</a>
  <a href="">Delete</a>
</div>

【讨论】：