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

相关推荐
FIN66681 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4951 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1241 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树1 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66681 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER1 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰1 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木1 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化1 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染
CoderYanger2 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html