select因为选中而造成的样式上下浮动

为了说明问题，我也找不到合适的录屏工具，然后就用最笨的方法用手机拍出来的，不过这样也直观些吧

先看下原来的效果，有没有看到上下浮动？

出现这种情况，肯定很无语啊，然后就找度娘，还真找到了解决办法

     <div style="float: left;padding-top: 20px;">
           <el-select v-model="city" placeholder="请选择"  @focus="initHome" value="1" style="width:100px;padding-left: 20px;vertical-align: top;">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="country" placeholder="请选择" @change="changeFunc" style="width: 120px;padding-left: 20px;vertical-align: top;">
                <el-option key="" label="请选择" value=""></el-option>
                <el-option
                        v-for="item in countries"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="village" placeholder="请选择污水处理站" @change="changeVillage" style="width: 200px;padding-left: 20px;vertical-align: top;">
                <el-option key="" label="请选择" value=""></el-option>
                <el-option
                        v-for="item in villageList"
                        :key="item.Code"
                        :label="item.Name + '污水处理站'"
                        :value="item.Code">
                </el-option>
            </el-select>
        </div>

秘诀就在这里，加了vertical-align: top;属性