让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>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 07:32:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 07:32:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 07:32:04       87 阅读
  4. Python语言-面向对象

    2024-03-15 07:32:04       96 阅读

热门阅读

  1. vue:功能【xlsx】纯前端导出Excel

    2024-03-15 07:32:04       46 阅读
  2. 每日一题 第三期 洛谷 国王游戏

    2024-03-15 07:32:04       42 阅读
  3. 2062:【例1.3】电影票

    2024-03-15 07:32:04       41 阅读
  4. 基于单片机的步进电机升降速并行控制

    2024-03-15 07:32:04       38 阅读
  5. 有密码pdf保存为无密码的

    2024-03-15 07:32:04       36 阅读
  6. C# 中的 List<int> 和 int[] ?

    2024-03-15 07:32:04       42 阅读
  7. GO sync.pool学习笔记

    2024-03-15 07:32:04       36 阅读
  8. MyBatis 之三:配置文件详解和 Mapper 接口方式

    2024-03-15 07:32:04       41 阅读
  9. 【图解物联网】第零章 前言

    2024-03-15 07:32:04       42 阅读