控制label标签的宽度,不让它换行 label标签左对齐

简介: 控制label标签的宽度,不让它换行 label标签左对齐

1==>控制label标签的宽度。解决字段名太长时,不会换行显示


 label-width="100px"   label标签的宽度是100px;


 style="width:280px;"   表示label和input的宽度一起有280px;注意一起是280px


<el-form-item
        label="访问密码:"
        label-width="100px"
        prop="accesspassword"
        style="width:280px;  "
      >
        <el-input v-model="VideoFirst.accesspassword"></el-input>
    </el-form-item>


2==>label标签左对齐


<el-form
      :model="VideoFirst"
      :rules="rulesfrist"
      ref="VideoFirst"
      :label-position="labellocaltion"
      class="demo-ruleForm"
    >
    </el-form>


data中labellocaltion:"left"  左对齐

 

但是注意  左对齐 必须要和 label-width一起使用才有用的哦


相关文章
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
3216 0
|
JavaScript
Element el-form 表单详解
本文目录 1. 前言 2. 基本用法 3. 行内表单 4. 标签对齐方式 5. 调整尺寸 6. 小结
2789 0
Element el-form 表单详解
|
前端开发 C# Android开发
2024年全面的多端统一开发解决方案推荐!
2024年全面的多端统一开发解决方案推荐!
1458 0
2024年全面的多端统一开发解决方案推荐!
|
存储 缓存 前端开发
Web应用中的存储方式有哪些?
本文首发于微信公众号“前端徐徐”,介绍了几种常见的前端数据存储技术:Cookie、Web Storage(包括 localStorage 和 sessionStorage)、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同,适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景,并提供了代码示例。
1927 2
Web应用中的存储方式有哪些?
|
运维 搜索推荐 调度
Ha3搜索引擎简介
Ha3是阿里巴巴搜索团队开发的搜索引擎平台,它为阿里集团包括淘宝、天猫在内的核心业务提供搜索服务支持。
26247 1
|
缓存 前端开发 JavaScript
React中怎么实现状态自动保存(KeepAlive)?
React中怎么实现状态自动保存(KeepAlive)?
688 0
|
自然语言处理 安全 API
比快更快,Elasticsearch 8.0 正式发布!
比快更快,Elasticsearch 8.0 正式发布!
|
网络协议 小程序 测试技术
ChaoBlade 的实现原理
【4月更文挑战第6天】ChaoBlade 的实现原理
563 3
ChaoBlade 的实现原理
|
安全 JavaScript Java
在线问卷调查|基于Spring Boot的在线问卷调查系统的设计与实现(源码+数据库+文档)
在线问卷调查|基于Spring Boot的在线问卷调查系统的设计与实现(源码+数据库+文档)
732 0
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件

热门文章

最新文章