搜索框和按钮放在同一行

如何将搜索框和按钮放在同行？？

这样看起来超难看，所以想把搜索框和按钮放在同一行，这样的话，使界面更美观。

我个人认为分两种：第一种是简单的放在同一行就行，输入框和按钮分开放在一行；第二种就是输入框和按钮紧挨在一起，形成一个小整体。

看下面包含两种的效果：

这里我借助的是饿了么的“布局”，官方文档

第一种：输入框和按钮同一行

总共将局分成了24个格，也就是：psan=24,gutter来控制每个el-col格子之间的大小。这里我就是借助element UI 的布局来是实现的，先是在el-row中划分成两个el-col 写法：

然后分别在el-col中写入和

<el-row :gutter="10">
	<el-col :span="12">
		<el-input type="text" palceholder=""></el-input>
	</el-col>
	<el-col :span="12">
		<el-button></el-button>
	</el-col>
</el-row>

写到这里，按钮合并如果你也想把多个按钮做成图中这种，简单

<el-button-group>
	<el-button type="primary" plain round size="medium"></el-button>
	<el-button type="" plain round size="medium"></el-button>
	<el-button type="" plain round size="medium"></el-button>
</el-button-group>

type值可以为“primary”、"warning"、"danger"、"info"
plain的效果是鼠标点击，颜色加重，离开变淡
round使按钮的∠变得更加有弧度，也可以是circle
size表示大小。从大到小排序：medium、small、mini

这样就可以实现上面的那个效果图了

第二种：输入框和按钮合并
写法很简单，在中加入就可以实现了

<el-input style="width:80%;" v-model="search_data" placeholder="请输入搜索的关键字">
	<template slot="append">
		<el-button type="primary" plain @click="">查找</el-button>
	</template>
</el-input>

就这么一句就可以了，注意：这里必须写