Angular自定义计算器文本填充后CSS布局错位问题排查

API 探路者

2026-7-6

Angular计算器布局偏移问题解决方案

这个问题的核心是内联元素的默认垂直对齐规则在搞鬼：

问题根源

你的.box用了display: inline-flex，属于内联级元素，这类元素默认的vertical-align值是baseline（基线对齐）：

空的.box没有文本内容，它的基线就是自身的底部边缘；
填了数字的.box，基线会和数字文本的基线对齐（也就是数字的底部位置）。
两种基线位置不一样，就导致有文本的盒子被往下拉，直到所有盒子都有文本、基线统一后才会对齐。

修复方案

给.box加上vertical-align: top，强制所有盒子以顶部为对齐基准：

.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: row;
  vertical-align: top; /* 新增这行 */
}

如果想让数字在盒子里居中显示，还可以补充flex的居中属性：

.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: row;
  vertical-align: top;
  justify-content: center; /* 水平居中数字 */
  align-items: center; /* 垂直居中数字 */
}