让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>
相关推荐
FreeTinker10 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_4523962310 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
海兰11 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
wangruofeng11 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne11 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel12 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
小磊哥er12 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
何以解忧,唯有..13 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
小磊哥er13 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程
海兰13 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(一)
javascript·python·金融