css冒号对齐

实现后的样式效果

在这里插入图片描述

实现方式

html:

<el-col v-if="item.showInSingle !== false" :span="6" style="padding: 4px 0"><label>{{ item.label }}:</label><span v-if="singleData[item.prop] !== 0 && !singleData[item.prop]">--</span>
</el-col>

css

	label {display: inline-block;width: 120px;text-align: right;}

将标题置为inline-block,给一个固定长度,然后指定右偏移。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/61707.html

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

相关文章

容灾备份服务器怎么样?

容灾备份服务器是一种用于保护信息系统的设备&#xff0c;它可以在系统出现故障时提供备用服务。容灾备份服务器通常包括两个部分&#xff1a;容灾和备份。容灾是指在遭遇灾害时能保证信息系统能正常运行&#xff0c;帮助企业实现业务连续性的目标。备份是为了应对灾难来临时造…

配置nginx服务端口时-在同一个页面中打开多个地址端口-查看服务情况

1&#xff1a;把代码保存到xxx.html文件中 2&#xff1a;因为一个个端口打开查看&#xff0c;实在太麻烦了 3&#xff1a;在一个页面中查看多页的响应才能提高测试效率 <html><head><title>本地连接列表</title> </head><body><cente…

后端人员如何快速上手vue

一、环境搭建 了解更多vue-cli 官网地址:https://cli.vuejs.org/zh/guide/browser-compatibility.html 前提 1.安装node(js代码的运行环境)、npm、cnpm/yarn&#xff1b; nodejs官网&#xff1a;https://nodejs.org/en cnpm安装&#xff1a;https://www.python100.com/htm…

微信小程序备案流程

微信小程序备案流程 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对你有帮助请帮我…

FreeIPA Server/Client不同版本组合,对podman rootless container的支持

FreeIPA Server/Client不同版本组合&#xff0c;对podman rootless container的支持 根据实验&#xff0c; CentOS 7.9 yum仓库自带的FreeIPA Server 4.6.8&#xff0c; ipa client版本支持CentOS 7.9 yum仓库自带的FreeIPA Client 4.6.8不支持subids&#xff0c;podman调用…

matplotlib 笔记 注释annotate

在图中的特定位置添加文本注释、箭头和连接线&#xff0c;以便更清晰地解释图形中的数据或信息 主要参数 text文本内容xy箭头指向的目标点的坐标xytext注释文本的坐标arrowprops 一个字典&#xff0c;指定注释箭头的属性&#xff0c;如颜色、箭头样式等 没有arrowprops的时候…

2021年03月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:药房管理 随着信息技术的蓬勃发展,医疗信息化已经成为医院建设中必不可少的一部分。计算机可以很好地辅助医院管理医生信息、病人信息、药品信息等海量数据,使工作人员能够从这些机械的工作中解放出来,将更多精力投入真正的医疗过程中,从而极大地提高了医院整体的工…

list的使用和模拟实现

目录 1.list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 2.为什么使用迭代器&#xff1f; 3.list的模拟实现 3.1完整代码 3.2代码解析 4.list与…

性能优化-react阻止子组件重渲染

因为父组件的状态变更会触发子组件的渲染&#xff0c;可以用shouldComponentUpdate或memo来阻止。下面就来介绍这两种方法。 类组件-shouldComponentUpdate 注&#xff1a;变化需要在render中打印&#xff0c;在component中检测不到 核心代码: 子组件中用shouldComponentUpda…

Flv格式视频怎么转MP4?视频格式转换方法分享

FLV格式的视频是一种早期的视频格式&#xff0c;不支持更高的分辨率和比特率&#xff0c;这意味着视频的清晰度和质量受限制&#xff0c;无法很好地保留细节和质量&#xff0c;这种格式的视频已经逐渐被更高质量的视频格式所替代&#xff0c;例如MP4格式&#xff0c;不仅具有很…

SpringBoot自定义拦截器interceptor使用详解

Spring Boot拦截器Intercepter详解 Intercepter是由Spring提供的Intercepter拦截器&#xff0c;主要应用在日志记录、权限校验等安全管理方便。 使用过程 1.创建自定义拦截器&#xff0c;实现HandlerInterceptor接口,并按照要求重写指定方法 HandlerInterceptor接口源码&am…

oi知识表+NOIP提高组算法及算法思想总结

&#xfeff;算法及算法思想总结 │ By lib │ ├暴力 ├模拟 ├递归及递推:数位统计类 ├构造 ▼├排序算法 │ ├冒泡排序 │ ├选择排序 │ ├计数排序 │ ├基数排序 │ ├插入排序 │ ├归并排序 │ ├快速排序 │…