设置按钮相邻

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

使用浮点数：

.floated {

float:left;

margin-right:5px;

}

.floated {

float:left;

margin-right:5px;

}

但是,您必须在带有clear的浮动元素之后添加一个元素：两种样式,以便容器扩展到浮动元素的高度.

使用内联块

.inline {

display:inline-block;

margin-right:5px;

}

.inline {

display:inline-block;

margin-right:5px;

}

内联块对浮动有一个好处(如果不是更多),因为如果需要,在浮动元素之后不需要清除元素.

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

>在父级中使用0px font-size并重置子元素中的font-size.

>将所有元素放在一起,即：< div>< / div>< div>< / div>

>将结束标记放在下一行和下一个元素旁边,即：

>将前一个元素的右括号放在下一行,然后放在下一个元素旁边,即：

>

虽然他们没有做出整洁的源代码

使用Flex

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

}

flex(以及其他)的一些好处是你不必担心元素之间的空白,并且元素可以根据需要通过各种flex样式的设置来缩小和增长.