如何在彼此旁边显示两个按钮[重复]答案

【问题标题】：How to display two buttons beside each other [duplicate]如何在彼此旁边显示两个按钮[重复]
【发布时间】：2019-06-05 09:23:37
【问题描述】：

我有以下两个按钮：

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

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

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

【问题讨论】：

为什么要使用两个按钮？您也可以通过动态更改文本来使用单个按钮。
我创建了a fiddle with your code，按钮确实彼此相邻。似乎它们可能与您的环境有关，导致它们堆叠。也许你的 div 的宽度设置得太低了？
拉德文，你是对的。我将每个按钮的宽度降低到 40 像素，现在它们彼此相邻出现。谢谢
但是我不知道为什么两个按钮之间有2px的距离，如何消除呢？我试过 padding = 0 但不起作用。

标签： html css

【解决方案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 的一个缺点是，如果您将源中的元素放在不同的行上，它将在元素之间添加一个空格。有几种解决方法：

在父元素中使用 0px 字体大小并在子元素中重置字体大小。
将所有元素并排放置，即：<div></div><div></div>
将结束标签放在下一行和下一个元素旁边，即：
```
<div>
</div><div>
</div>
```
将前一个元素的右括号放在下一行和下一个元素旁边，即：
```
<div></div
><div></div>
```

虽然它们不会使源代码看起来整洁

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

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

你可以看到guide for flex here

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：