Html 如何在css中在同一行显示3个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21376788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display 3 buttons on the same line in css
提问by Razvan N
I want to display 3 buttons on the same line in html. I tried two options: This one:
我想在 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>
And this one:
和这个：
<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?
可悲的是，他们都不好，我似乎找不到任何其他选择。第一个和第二个按钮显示在同一行，但第三个显示在下方......你能帮我吗？
回答by Karuppiah RK
Here is the Answer
这是答案
CSS
CSS
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}
HTML
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>
回答by Pranav C Balan
Do something like this,
做这样的事情，
HTML :
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 :
CSS :
div button{
display:inline-block;
}
Or
或者
HTML :
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 :
CSS :
#container div{
display:inline-block;
width:130px;
}
回答by sree
This will serve the purpose. There is no need for any divs or paragraph. If you want the spaces between them to be specified, use margin-left or margin-right in the css classes.
这将达到目的。不需要任何 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>
回答by Navin
You need to float all the buttons to left and make sure its width to fit within outer container.
您需要将所有按钮向左浮动，并确保其宽度适合外部容器。
CSS:
CSS：
.btn{
float:left;
}
HTML:
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>
回答by Frankenscarf
The following will display all 3 buttons on the same line provided there is enough horizontal space to display them:
如果有足够的水平空间来显示它们，以下将在同一行显示所有 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.
The only reason the buttons wouldn't display inline is if they have had display:block applied to them within your css.
按钮不会内联显示的唯一原因是如果它们在您的 css 中对它们应用了 display:block。
