MUI如何实现文本数字并排对齐，解决响应式布局下元素错位问题

你现在用transform: translateY()硬挪位置属于典型的“凑效果”写法，元素本身的布局位置根本没对，偏移值是你在当下屏幕尺寸下凑出来的固定值，一旦屏幕缩放、容器宽度变化、字体渲染规则变了，位置肯定错位。你说的文本右侧多余边距，要么是元素本身设了固定宽/内边距没清，要么是内联元素默认的空白间隙，不是靠偏移能解决的。

直接用Flex布局做基线对齐，从布局逻辑上解决问题，根本不需要手动调偏移，全尺寸自适应：

• 给包裹文本和数字的父容器加以下样式：

.content-wrap {
  display: flex;
  align-items: baseline; /* *核心属性*：自动按文本基线对齐，和你要的排版效果完全匹配 */
  gap: 6px; /* 按需调整数值，精准控制文本和数字的间距，彻底消掉多余空隙 */
}

• 清空文本、数字两个子元素上之前写的transform相关偏移代码，同时重置默认边距：

.content-wrap .text,
.content-wrap .num {
  margin: 0;
  padding: 0;
  /* 不要给这两个元素设固定宽度，宽度由内容自然撑开就不会有多余边距 */
}

• 如果做完以上两步文本右侧还是有视觉空隙，检查下文本代码里是不是末尾带了多余的空格、换行，删掉即可，不需要额外加样式偏移。

不要用align-items: center做对齐，这个属性是按元素的高度中线对齐，和西文字体的自然排版基线有视觉差，出来的效果会和你参考的对齐效果不一致，必须用baseline值。
这个方案完全走正常文档流，不管屏幕尺寸怎么变、字体大小怎么调，对齐关系都不会乱，也不会出现莫名的多余边距。

内容的提问来源于stack exchange，提问作者code