Html 如何显示两个按钮并排显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18340057/
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 two buttons beside each other
提问by willypuzzle
I have the following two buttons:
我有以下两个按钮：
<div>
<input type="button" id="slide_start_button" value="Start">
<input type="button" id="slide_stop_button" value="Stop">
</div>
I would put both one beside each other (for example |Start||Stop|). I can but I have to use the position: relativeCSS rule and an empty space was below buttons that I don't want.
我会将两者并排放置（例如 |Start||Stop|）。我可以，但我必须使用position: relativeCSS 规则，并且我不想要的按钮下方有一个空白区域。
How can I put the two buttons each beside other in portable manner?
如何以便携方式将两个按钮并排放置？
回答by Patrick Evans
There are a few ways to get elements lined up next to each other
有几种方法可以让元素彼此相邻排列
Using floats:
使用浮点数：
<input type="button" class="floated" id="slide_start_button" value="Start">
<input type="button" class="floated" id="slide_stop_button" value="Stop">
.floated {
float:left;
margin-right:5px;
}
.floated {
float:left;
margin-right:5px;
}<input type="button" class="floated" id="slide_start_button" value="Start">
<input type="button" class="floated" id="slide_stop_button" value="Stop">A con to this though is that you have to add an element after the floated elements with clear:both style in order for the container to expand to the height of the floated elements.
但是，与此相反的是，您必须使用 clear:both 样式在浮动元素之后添加一个元素，以便容器扩展到浮动元素的高度。
Using inline-block
使用内联块
<input type="button" class="inline" id="slide_start_button" value="Start">
<input type="button" class="inline" id="slide_stop_button" value="Stop">
.inline {
display:inline-block;
margin-right:5px;
}
.inline {
display:inline-block;
margin-right:5px;
}<input type="button" class="inline" id="slide_start_button" value="Start">
<input type="button" class="inline" id="slide_stop_button" value="Stop">inline-block has a benefit (if not more) over float as you do not need a clearing element after the floated ones, if needed.
inline-block 比 float 有好处（如果不是更多的话），因为如果需要，在浮动元素之后不需要清除元素。
A con of using inline-block though is that if you have your elements in your source on separate lines it will add a whitespace between your elements. There are several work arounds for this:
但是，使用 inline-block 的一个缺点是，如果您将源中的元素放在单独的行中，它将在您的元素之间添加一个空格。有几种解决方法：
- Using 0px font-size in parent and resetting the font-size in the child elements.
- Putting all the elements next to each other, ie:
<div></div><div></div> Putting the closing tag on the next line and next to the next element, ie:
<div> </div><div> </div>Putting the closing bracket of the previous element on the next line and next to the next element, ie:
<div></div ><div></div>
- 在父元素中使用 0px 字体大小并在子元素中重置字体大小。
- 将所有元素并排放置，即：
<div></div><div></div> 将结束标记放在下一行和下一个元素旁边，即：
<div> </div><div> </div>将前一个元素的右括号放在下一行和下一个元素旁边，即：
<div></div ><div></div>
Though they do not make for neat looking source code
尽管它们不能使源代码看起来整洁
Using Flex
使用 Flex
<div class="flex">
<input type="button" class="flex-child" id="slide_start_button" value="Start">
<input type="button" class="flex-child" id="slide_stop_button" value="Stop">
</div>
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-child {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-child {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-right:5px;
}<div class="flex">
<input type="button" class="flex-child" id="slide_start_button" value="Start">
<input type="button" class="flex-child" id="slide_stop_button" value="Stop">
</div>A couple of benefits of flex (among others) is that you do not have to worry about the whitespace between elements, and the elements can shrink and grow as needed by settings of the various flex styles.
flex 的几个好处（除其他外）是您不必担心元素之间的空白，并且元素可以根据各种 flex 样式的设置根据需要缩小和增长。
You can see a guide for flex here
So you can choose what will suit your site layout needs best.
因此，您可以选择最适合您的网站布局需求的内容。
回答by Lucky Pierre
In addition to floating them left, you can change the display property on the inputs to inline-block.
除了将它们向左浮动之外，您还可以将输入的显示属性更改为 inline-block。
#slide_start_button, #slide_stop_button{
display: inline-block;
margin-right: 5px;
}
回答by Keshav Pradeep Ramanath
Using Bootstrap , this can also be achieved. Please find the below piece of html.
使用 Bootstrap ，这也可以实现。请找到下面的一段 html。
<div class="container">
<div class="row">
<div class="col-xs-2">
<button type="button" id="slide_start_button" value="Start" class="btn btn-success">Start</button>
</div>
<div class="col-xs-4">
<button type="button" id="slide_stop_button" value="Stop" class="btn btn-success">Stop</button>
</div>
</div>
</div>
Output:
输出：
Edit 2:
编辑2：
Another alternate is to use the button group which can yield the required result.
另一种替代方法是使用可以产生所需结果的按钮组。
<div class="btn-group">
<button id="slide_start_button" value="Start">Start</button>
<button id="slide_stop_button" value="Stop">Stop</button>
</div>
