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

news/2024/7/27 8:10:02/文章来源:https://blog.csdn.net/qq_51326491/article/details/136711655

让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.luyixian.cn/news_show_1007668.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智慧未来,构建智慧校园业务架构的探索与实践

随着科技的不断发展&#xff0c;智慧校园作为教育信息化的重要组成部分&#xff0c;正在逐步改变传统教育管理模式&#xff0c;为学校带来更高效、便捷的管理服务。本文将深入探讨智慧校园业务架构设计的理念、核心功能和应用场景&#xff0c;助力读者了解如何构建智慧校园&…

STM32利用标准库控制定时器3复用端口PB4输出PWM波形

这节也是接着上节来演示的&#xff0c;上节写的是TIM2的CH1输出PWM波形&#xff0c;这次来学习一下TIM3的端口复用方法来输出PWM&#xff0c;来看看端口引脚图&#xff1a;正常情况下TIM3的CH1通道的PWM输出引脚为PA6&#xff0c;现在我不想用这个端口输出了&#xff0c;我想换…

【Redis】Redis常用命令之Hash

1.hset&#xff1a;设置hash中指定的字段&#xff08;field&#xff09;的值&#xff08;value&#xff09;。 HSET key field value [field value ...]时间复杂度&#xff1a;插⼊⼀组field为O(1),插⼊N组field为O(N)。 返回值&#xff1a;添加的字段的个数。 2.hget&#xf…

【AI+CAD】(二)LLM和VLM生成结构化数据结构(PPT/CAD/DXF)

当前LLM和VLM在PPT生成任务上已经小有成效,如ChatPPT。 @TOC 1. PPT-LLM LLM根据用户的instruction生成规范的绘制ppt的API语句:即使是最强的GPT-4 + CoT也只能达到20-30%的内容准确度。 LLM输入:User_instruction(当前+过去)、PPT_content、PPT_reader_API。其中 PPT_rea…

ChatGPT赋能遥感研究:精准分析处理遥感影像数据,推动科研新突破

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能在解…

苍穹外卖问题记录(持续更新)

Day01_3.2.4前后端联调 1. 前端无法登录 &#xff08;1&#xff09;确保nginx服务器已经启动 &#xff08;2&#xff09;查看自己数据库的用户名和密码是否和老师的一样&#xff0c;不一样的话需要在application-dev.yml文件中把老师的用户名密码修改成自己的 老师的用户名…

中间件漏洞(redis)

目录 1.Redis服务器被挖矿案例 2.redis常见用途 3.redis环境配置 4.redis的持久化机制 5.redis动态修改配置 6.webshell提权案例 7.定时任务bash反弹连接提权案例 8.SSH Key提权案例 9.redis安全加固分析 1.Redis服务器被挖矿案例 我没有体验过&#xff0c;那就看看别…

linux环境基础开发工具1(vim 、 yum)

目录 前言 Linux编辑器-vim使用 Linux 软件包管理器 yum 前言 集成开发环境&#xff08;IDE&#xff0c;Integrated Development Environment &#xff09;是用于提供程序开发环境的应用程序&#xff0c;一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码…

verilog 从入门到看得懂---verilog 介绍

verilog介绍 Verilog HDL 是一种硬件描述语言&#xff0c;HDL是 hardware description language发缩写。可以用于数字电子下系统的设计。通俗点说就是在设计数字芯片或着使用cpld 或者fpga的时候用到&#xff0c;比如在设计电路的时候&#xff0c;如果要试一下一个计数功能&am…

使用 ChatGPT 写高考作文

写作文&#xff0c;很简单&#xff0c;但写一篇好的作文&#xff0c;是非常有难度的。 想要写一篇高分作文&#xff0c;需要对作文题目有正确的理解&#xff0c;需要展现独到的观点和深入的思考&#xff0c;需要具备清晰的逻辑结构&#xff0c;需要准确而得体的语言表达。 正…

OSCP靶场--Exfiltrated

OSCP靶场–Exfiltrated 考点(1.cms 站点地图插入php反弹shell 2. CVE-2021-4034提权 3.root定时任务提权[CVE-2021-22204]) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.155.163 --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) a…

ELK之使用Filebeat插件收集日志到Logstash

对于Springboot项目接入ELK非常方便&#xff0c;对于非maven&#xff0c;非Spring项目来说就比较复杂&#xff0c;这个时候我们就可以使用Filebeat插件还完成日志的收集发送工作。 Filebeat介绍 Filebeat是用于转发和收集数据的轻量级工具&#xff0c;Filebeat可以监视指定的…

前端接口防止重复请求实现方案

虽然大部分的接口处理我们都是加了loading的&#xff0c;但又不能确保真的是每个接口都加了的&#xff0c;可是如果要一个接口一个接口的排查&#xff0c;那这维护了四五年的系统&#xff0c;成百上千的接口肯定要耗费非常多的精力&#xff0c;根本就是不现实的&#xff0c;所以…

王道机试C++第 5 章 数据结构二:队列queue和21年蓝桥杯省赛选择题Day32

目录 5.2 队列 1&#xff0e;STL-queue 课上演示&#xff1a; 基本代码展示&#xff1a; 2. 队列的应用 例:约瑟夫问题 No. 2 题目描述&#xff1a; 思路提示&#xff1a; 代码展示&#xff1a; 例&#xff1a;猫狗收容所 题目描述&#xff1a; 代码表示&#xff1…

阿里云的服务器迁移到腾讯云

第一次用在线迁移&#xff0c;说下我的感受&#xff1a; 总体说&#xff0c;整个迁移过程非常简单&#xff08;一个命令都不需要&#xff09;&#xff0c;操作确实很方便&#xff0c;迁移成功后的项目运行环境&#xff08;本人是通过宝塔安装的LNMP环境&#xff09;、网站配置、…

保持长期高效的七个法则(一)7 Rules for Staying Productive Long-Term(2)

If your system is going to be liberating rather than suffocating, however, you need to follow a few guidelines: 然而&#xff0c;如果你的系统想要解放而不是扼制&#xff0c;就需要遵循一些准则&#xff1a; Rule #1 - Your system needs to fit your work(not the ot…

抖音在线点赞任务发布接单运营平台PHP网站源码 多个支付通道+分级会员制度

介绍 1、三级代理裂变&#xff0c;静态返佣/动态返佣均可设置。&#xff08;烧伤制度&#xff09;。 2、邀请二维码接入防红跳转。 3、自动机器人做任务&#xff0c;任务时间可设置&#xff0c;机器人价格时间可设置。 4、后台可设置注册即送X天机器人。 5、不同级别会员使…

学习Android的第二十八天

目录 Android Service (服务) 线程 Service (服务) Service 相关方法 Android 非绑定 Service startService() 启动 Service 验证 startService() 启动 Service 的调用顺序 Android 绑定 Service bindService() 启动 Service 验证 BindService 启动 Service 的顺序 …

Day42-企业级网络存储NFS01

Day42-企业级网络存储NFS01 1. 什么是NFS&#xff1f;2. 为什么要用网络共享存储&#xff1f;3. 共享存储的种类4. NFS工作原理5. 环境准备6. NFS软件列表7. 安装8. 配置nfs9. 项目实践作业&#xff1a;10. ()权限 对应参数11. 在生产中配置NFS的重要技巧&#xff1a;12. 项目实…

R语言深度学习-1-深度学习入门(H2O包安装报错解决及接入/H2O包连接数据集)

本教程参考《RDeepLearningEssential》 1.1 深度学习概念 深度学习是机器学习的一个子集&#xff0c;它特别指的是那些试图模拟人脑工作原理的算法和技术。这种类型的机器学习通过使用多层的人工神经网络来学习和表示数据的内在规律和层次结构。深度学习已经在多个领域取得了…