网页组件强制设置右对齐
背景:在列表数据状态下,一格数据要显示两行内容,第一行是标签数据,第二行是文字数据
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签布局示例</title><style scoped>/* CSS样式保持与需求一致 */.label-value-wrapper {display: flex;flex-direction: column;justify-content: space-between; /* 关键代码:反向分配空间 */align-items: flex-start;gap: 2px;}.tags-wrapper {text-align: right !important; /* 强制覆盖原有样式 */width: 130px; /* 指定右边间距 */}</style>
</head>
<body><!-- 页面主体内容 --><div style="height: 100vh;"> <!-- 添加高度容器确保flex布局生效 --><div class="label-value-wrapper"><span class="tags-wrapper"><span> 标签1</span></span><span> 文字1 </span></div><!-- 如需多个示例,可以复制以下模块 --><!-- <div class="label-value-wrapper"><span class="tags-wrapper"><span> 标签2</span></span><span>{{ 文字2 }}</span></div>--></div>
</body>
</html>