当前位置：首页 > ai >正文

网页组件强制设置右对齐

ai 2025/6/20 18:10:40

背景：在列表数据状态下，一格数据要显示两行内容，第一行是标签数据，第二行是文字数据

完整代码

<!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>

查看全文

http://www.xdnf.cn/news/13366.html