css,html按钮彼此相邻

我有以下两个按钮：

<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的答案

解决方法

有几种方法可以将元素排列在一起

使用浮点数：

<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

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