让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>
相关推荐
扯蛋43836 分钟前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy44 分钟前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉1 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码1 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点1 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi2 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽2 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start2 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐2 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设
爱喝水的小周2 小时前
《UniApp 页面配置文件pages.json》
前端·uni-app·json