让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.hqwc.cn/news/539769.html

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

相关文章

GPT-5:人工智能的下一个前沿即将到来

当我们站在人工智能新时代的门槛上时&#xff0c;GPT-5即将到来的呼声愈发高涨且迫切。作为革命性的GPT-3的继任者&#xff0c;GPT-5承诺将在人工智能领域迈出量子跃迁式的进步&#xff0c;其能力可能重新定义我们与技术的互动方式。 通往GPT-5之路 通往GPT-5的旅程已经标记着…

Annaconda环境下ChromeDriver配置及爬虫编写

Anaconda环境的chromedriver安装配置_anaconda 配置chromedriver-CSDN博客 Chromedriver驱动( 121.0.6167.85 ) - 知乎 下载好的驱动文件解压&#xff0c;将exe程序复制到Annaconda/Scripts目录以及Chrome/Application目录下 注意要提前pip install selenium包才能运行成功&a…

GCNv2_SLAM-CPU详细安装教程(ubuntu18.04)

GCNv2_SLAM-CPU详细安装教程-ubuntu18.04 前言一、安装第三方库1.安装Pangolin2.安装OpenCV3.安装Eigen4.安装Pytorch(c) 二、安装以及运行GCNv2_SLAM1.安装编译GCNv2_SLAM2.单目模式运行演示案例 总结 前言 paper:https://arxiv.org/pdf/1902.11046.pdf githup::https://gith…

为什么要用scrapy爬虫库?而不是纯python进行爬虫?

为什么要用scrapy爬虫库&#xff1f;而不是纯python进行爬虫&#xff1f; Scrapy的优点Scrapy节省的工作使用纯Python编写爬虫的不足 Scrapy是一个使用Python编写的开源和协作的web爬虫框架&#xff0c;它被设计用于爬取网页数据并从中提取结构化数据。Scrapy的强大之处在于其广…

matlab调用nlopt时向目标函数中传入数据的案例

matlab调用nlopt时向目标函数中传入数据的案例&#xff0c;如代码所示&#xff1a; clc,clear,close allopt.algorithm NLOPT_LN_AUGLAG; opt.lower_bounds -10; opt.upper_bounds 10; opt.min_objective (x) goal_function(x,[1,2,3,4,5,6,7,8,9]); opt.xtol_rel 1e-8; …

java垃圾回收-三色标记法

三色标记法 引言什么是三色标记法白色灰色黑色 三色标记过程三色标记带来的问题多标问题漏标问题 如何弥补漏标问题增量更新原始快照总结 引言 在CMS,G1这种并发的垃圾收集器收集对象时&#xff0c;假如一个对象A被GC线程标记为不可达对象&#xff0c;但是用户线程又把A对象做…

基于微信小程序的作业管理系统的设计与实现【附项目源码】分享

基于微信小程序的作业管理系统的设计与实现&#xff1a; 源码地址&#xff1a;https://download.csdn.net/download/qq_41810183/88842836 一、引言 随着移动互联网的普及和微信小程序的广泛应用&#xff0c;教育领域也在积极探索如何利用这些新技术提升教学质量和效率。本需…

基于word2vec 和 fast-pytorch-kmeans 的文本聚类实现,利用GPU加速提高聚类速度

文章目录 简介GPU加速 代码实现kmeans聚类结果kmeans 绘图函数相关资料参考 简介 本文使用text2vec模型&#xff0c;把文本转成向量。使用text2vec提供的训练好的模型权重进行文本编码&#xff0c;不重新训练word2vec模型。 直接用训练好的模型权重&#xff0c;方便又快捷 完整…

工具篇--从零开始学Git

一、git概述 1.1安裝 windows版本 官方下载&#xff08;比较慢&#xff09;&#xff1a;Git - Downloads Linux版本 ​yum install git查看git版本。 git --version 1.2创建仓库gitee 注册账号 Gitee - 基于 Git 的代码托管和研发协作平台 新建仓库 honey2024 配置 git confi…

安装kibaba

官方地址&#xff1a;Past Releases of Elastic Stack Software | Elastic 直接下载就可以 安装好了之后开始配置文件/kibana/config打开kibanba.yml server.port:5601 服务器地址 sercer.name:kibana 服务器名称 kibana.index:.kibana 索引 elasticsearch.hosts:[http://1…

Kafka是什么,以及如何使用SpringBoot对接Kafka

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可靠性分析及优化实践 Kafka是什么&#xff0c;以及如何使用…

mysql 主从延迟分析

一、如何分析主从延迟 分析主从延迟一般会采集以下三类信息。 从库服务器的负载情况 为什么要首先查看服务器的负载情况呢&#xff1f;因为软件层面的所有操作都需要系统资源来支撑。 常见的系统资源有四类&#xff1a;CPU、内存、IO、网络。对于主从延迟&#xff0c;一般会…