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

相关推荐
疯狂的沙粒17 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq221 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli22 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i22 分钟前
HTML5 拖放 API
前端·html
xiaominlaopodaren37 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX38 分钟前
一句话解释JS链式调用
前端·javascript
1024小神40 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano44 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
小小小小宇1 小时前
前端定高和不定高虚拟列表
前端