让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>
相关推荐
dorabighead16 分钟前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
css趣多多34 分钟前
案例自定义tabBar
前端
姑苏洛言2 小时前
DeepSeek写微信转盘小程序需求文档,这不比产品经理强?
前端
林的快手2 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳2 小时前
ECharts极简入门
前端·信息可视化·echarts
bug总结2 小时前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪3 小时前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全
API_technology3 小时前
电商API安全防护:JWT令牌与XSS防御实战
前端·安全·xss
yqcoder3 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香3 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript