css冒号对齐

实现后的样式效果

实现方式

html:

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

css 复制代码
	label {
        display: inline-block;
        width: 120px;
        text-align: right;
    }

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

相关推荐
春风得意之时7 小时前
前端安装项目出现代理问题和ssl认证问题
前端·网络协议·ssl
问心无愧05137 小时前
ctf show web入门109
android·前端·笔记
meilindehuzi_a7 小时前
透视 V8 底部:从物理内存到函数式哲学,重新解构 JavaScript 数组
开发语言·javascript·ecmascript
粉末的沉淀7 小时前
vue:Vite项目中高效管理纯色SVG图标的方案
前端·javascript·vue.js
FlyWIHTSKY7 小时前
JavaScript 和 TypeScript 分别是什么,可以相互写吗
javascript·ubuntu·typescript
YHHLAI7 小时前
JavaScript 数据结构精讲:数组底层与实战避坑
开发语言·javascript·数据结构
moMo7 小时前
Promise 的本质:不是异步处理,而是流程控制
javascript
dotnet907 小时前
PDF 页面尺寸上限是 14400。iText 直接加载成功的大图可能超过这个限制,需要在 setPageSize 之前等比缩放。
前端·javascript·html
threelab7 小时前
Three.js 几何图形变换 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
道友可好7 小时前
写给 AI 的入职手册,AGENTS.md
前端·人工智能·后端