html - 如何并排显示两个按钮

Question

我有以下两个按钮：

<div>
    <input type="button" id="slide_start_button" value="Start">
    <input type="button" id="slide_stop_button"  value="Stop">
</div>

我会将两者放在一起（例如|开始||停止|）。我可以，但我必须使用position: relativeCSS 规则，并且我不想要的按钮下方有一个空白区域。

如何以便携的方式将两个按钮并排放置？

Answer 1

有几种方法可以让元素彼此相邻排列

使用浮点数：

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

一个缺点是你必须在浮动元素之后添加一个元素，使用 clear:both 样式，以便容器扩展到浮动元素的高度。

使用内联块

<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 比浮动有一个好处（如果不是更多的话），因为如果需要，您不需要在浮动元素之后使用清除元素。

不过，使用 inline-block 的一个缺点是，如果您将源中的元素放在不同的行上，它将在元素之间添加一个空格。有几种解决方法：

1. 在父元素中使用 0px 字体大小并在子元素中重置字体大小。
2. 将所有元素彼此相邻放置，即：<div></div><div></div>

3. 将结束标签放在下一行和下一个元素旁边，即：

   <div>
   </div><div>
   </div>
   

4. 将前一个元素的右括号放在下一行和下一个元素旁边，即：

   <div></div
   ><div></div>
   

尽管它们不能使源代码看起来整洁

使用弹性

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

flex 的几个好处（除其他外）是您不必担心元素之间的空白，并且元素可以根据各种 flex 样式的设置按需收缩和增长。

您可以在此处查看 flex 指南

因此，您可以选择最适合您的网站布局需求的内容。

Answer 2

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

输出：

编辑2：

另一种选择是使用可以产生所需结果的按钮组。

<div class="btn-group">
   <button id="slide_start_button" value="Start">Start</button>
   <button id="slide_stop_button" value="Stop">Stop</button>
</div>

Answer 3

除了将它们向左浮动之外，您还可以将输入上的显示属性更改为 inline-block。

#slide_start_button, #slide_stop_button{
   display: inline-block;
   margin-right: 5px;
}