vue element-ui input框和图片并排同行

可能是项目采用vue+element来搭建的原因，在网上找了半天没有找到，最后自己测试出来的，记录下有需要的可以参考。

需求：将input框和图片并排在一行

最终效果图：

布局代码：

<template>
  <el-form :label-position="labelPosition" label-width="130px" :model="formLabelPay" class="input">
    <el-form-item label="Credit card No.:">
              // onkeyup 是限制页面不可以输入中文
              <el-input v-model="formLabelPay.num" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
              <el-image :src="require('@/assets/icon/visa1.png')" class="icon"></el-image>
              <el-image :src="require('@/assets/icon/mastercard1.jpg')" class="icon"></el-image>
              <el-image :src="require('@/assets/icon/AmericanExpress1.png')" class="icon"></el-image>
              <el-image :src="require('@/assets/icon/JCB1.jpg')" class="icon"></el-image>
              <el-image :src="require('@/assets/icon/dinerclub1.jpg')" class="icon"></el-image>
              <el-image :src="require('@/assets/icon/discover1.png')" class="icon"></el-image>
      </el-form-item>
  </el-form>
</template>

.icon{
    width: 6%;
    vertical-align:middle;
  }

最开始，我不是用的 el-image，是直接用的 img，图片是对齐了，但input框直接独占一行，还是分2行显示的；后来用 position 绝对定位是搞定了，但是对于不同的分辨率屏幕的话容易存在隐患，最后改用 element-ui 的 el-image，就解决了这个问题。