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,给一个固定长度,然后指定右偏移。

相关推荐
GISer_Jing8 小时前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫8 小时前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫8 小时前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
Ares-Wang8 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
阿智@119 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
EveryPossible9 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说9 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒9 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi5209 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者9 小时前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端