让el-input与其他组件能够显示在同一行

让el-input与其他组件能够显示在同一行

说明:由于el-input标签使用会默认占满一行,所以在某些需要多个展示一行的时候不适用,因此需要能够跟其他组件显示在同一行。

效果

1、el-input标签内使用css属性inline

js 复制代码
111<el-input style="display:inline"></el-input>
222<el-input style="display: inline;"></el-input>

2、使用el-row行标签和el-col列标签共同使用,并使用到el-col的span属性(总共一行分为24段,可以自定义一列占多少段)

js 复制代码
<el-row>
  333<el-col :span="2"><el-input></el-input></el-col>
  444<el-col :span="5"><el-input></el-input></el-col>
  <el-button type="success">111</el-button>
</el-row>

3、利用el-form标签进行实现 字+输入框 效果

js 复制代码
<el-form ref="form" label-width="100px">
  <el-form-item label="商品名称:">
       <el-input v-model="name" placeholder="请输入内容"></el-input>
  </el-form-item>
  <el-form-item label="商品价格:">
        <el-input v-model="price" placeholder="请输入内容"></el-input>
  </el-form-item>
</el-form>

4、使用css的display:flex流动布局

js 复制代码
<div style="display:flex">
    11<el-input></el-input>
    22<el-input></el-input>
    <el-button type="success">111</el-button>
</div>
相关推荐
小喷友40 分钟前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
zwjapple40 分钟前
Next.js 中使用 MongoDB 完整指南
开发语言·javascript·mongodb
像素之间43 分钟前
elementui中rules的validator 用法
前端·javascript·elementui
小高0071 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
CF14年老兵1 小时前
SQL 是什么?初学者完全指南
前端·后端·sql
2401_837088501 小时前
AJAX快速入门 - 四个核心步骤
前端·javascript·ajax
一月是个猫1 小时前
前端工程化之Lint工具链
前端
小潘同学1 小时前
less 和 sass的区别
前端
无羡仙1 小时前
当点击链接不再刷新页面
前端·javascript·html
王小发1011 小时前
快速知道 canvas 来进行微信网页视频无限循环播放的思路
前端