我有以下两个按钮：
<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
因此,您可以选择最适合您的网站布局需求的内容.
