Question

我有以下两个按钮：

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

我会将两者放在一起（例如| Start || Stop |）。我可以，但我必须使用“位置：相对”css规则，空白空间在我不想要的按钮下面。如何以便携方式将两个按钮分别放在另一个按钮旁边？

由于

更新：我将两个按钮的宽度降低到48px，现在它们适合正确的位置。但是我无法管理的按钮之间有2个像素的空间，我试图在按钮上添加填充：0，或者按钮上的边距：0，但没有。

更新：我找到了上一个问题的答案here

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的浮动元素之后添加一个元素：两种样式，以便容器扩展到浮动元素的高度。

使用内联块

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

内联块对浮动有一个好处（如果不是更多），因为如果需要，在浮动元素之后不需要清除元素。

使用内联块的一个问题是，如果你的源中的元素在不同的行上，它将在你的元素之间添加一个空格。有几种解决方法：

在父级中使用0px font-size并重置子元素中的font-size。
将所有元素放在一起，即：<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

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

Answer 2

除了向左浮动它们之外，您还可以将输入的显示属性更改为内联块。

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

Answer 3

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

css，html按钮彼此相邻

3 个答案: