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

Answer 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

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

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

Answer 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应用于它们。

如何在CSS中的同一行显示3个按钮

5 个答案: