当前位置: 首页 > news >正文

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

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

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

效果
在这里插入图片描述

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

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段,可以自定义一列占多少段)

<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标签进行实现 字+输入框 效果

<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流动布局

<div style="display:flex">11<el-input></el-input>22<el-input></el-input><el-button type="success">111</el-button>
</div>
http://www.lryc.cn/news/319864.html

相关文章:

  • 学完Efficient c++ (44-45)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:ColumnSplit)
  • jenkins部署go应用 基于docker-compose
  • 【晴问算法】入门篇—贪心算法—整数配对
  • 九种背包问题(C++)
  • 008:安装Docker
  • STM32第九节(中级篇):RCC(第一节)——时钟树讲解
  • Web核心,HTTP,tomcat,Servlet
  • 空间(Space)概念:元素、集合、空间和数学对象
  • 【Datawhale组队学习:Sora原理与技术实战】训练一个 sora 模型的准备工作,video caption 和算力评估
  • Kafka-生产者报错javax.management.InstanceAlreadyExistsException
  • Java常见问题:编辑tomcat运行环境、部署若伊系统
  • 阿里云免费证书改为3个月,应对方法很简单
  • 安装Pytorch——CPU版本
  • MySQL中出现‘max_allowed_packet‘ variable.如何解决
  • PHP 生成图片
  • 【Spring Boot 3】【JSON】读取JSON文件
  • 网络学习:邻居发现协议NDP
  • Spring事务传播行为总结
  • AWTK slider_circle 控件发布
  • BitMap 和 HyperLogLog
  • 德人合科技 | 公司办公终端、电脑文件资料 \ 数据透明加密防泄密管理软件系统
  • 0基础 三个月掌握C语言(11)
  • 【Linux】基础 IO(文件描述符)-- 详解
  • 如何降低云计算成本?
  • C# 打开文件对话框(OpenFileDialog)
  • 《LeetCode热题100》笔记题解思路技巧优化_Part_3
  • Rocket MQ 从入门到实践
  • Vue中的Vnode虚拟Dom一文详解
  • 请求头content-type的类型有什么?