Html 如何在css中在同一行上显示3个按钮

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

p{display:inline}

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

---

你能帮我吗？

像这样做

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>

div button{
    display:inline-block;
}

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

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

.btn{

   float:left;
}

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

或

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>

div button{
    display:inline-block;
}

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

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

.btn{

   float:left;
}

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

以下是答案

CSS

HTML

拯救
发表
返回

---

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

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

拯救
发表
返回

如果有足够的水平空间来显示所有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. 

保存
发表
返回
//注意没有不必要的div、float等。

---

按钮不会内联显示的唯一原因是，如果它们在css中应用了display:block。

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

CSS:

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

div button{
    display:inline-block;
}

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

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

.btn{

   float:left;
}

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

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>

div button{
    display:inline-block;
}

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

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

.btn{

   float:left;
}

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

保存
发表
返回

将它们全部向左浮动，并确保它们所在的div或容器的宽度大于所有按钮的总宽度是否有理由将按钮放在

div

或

p

标记中？把它们都漂走

p

标记代表段落，很明显两段不应该在同一行，因此避免使用

p

。@putvande不是真的，我想我会需要它，但现在它没有用…只要删除所有

p

标记，它就会工作正常。不正确的

显示：内联

将删除根据高度和宽度设置按钮样式的可能性+1：但是将

内联块
类
分配给按钮比将它们包装在类中更好：）3年后仍然是一个非常好的答案！谢谢你