Vue组件中div内Input与Span切换时水平对齐异常问题排查

问题现象 #

实现点击div容器切换显示input/span的功能，初始渲染时所有单元格水平对齐正常，但修改输入框内容后，多个table-cell组件出现上下错位，无法保持水平对齐。

原因剖析 #

问题根源在CSS的垂直对齐规则上：

• .cell-wrapper设置了display: inline-flex，浏览器默认给这类元素的vertical-align值是baseline（基线对齐）。
• 初始状态下所有单元格显示的是空span，此时所有元素的基线位置一致，看起来对齐正常；但当切换到input并输入内容后，input的基线（输入文本的底线）和空span的基线位置存在差异，baseline对齐规则会让单元格根据内部内容的基线调整垂直位置，最终导致错位。

修复方案 #

方案1：强制设置单元格垂直对齐 #

给.cell-wrapper添加vertical-align属性，强制所有单元格统一对齐基准，不受内部内容影响：

.cell-wrapper {
  display: inline-flex;
  align-items: center;
  width: 100px;
  border: 1px solid #ccc;
  padding: 0;
  margin: 0;
  vertical-align: top; /* 可根据需求换成middle或bottom */
}

方案2：改用父容器flex布局（推荐） #

把包裹所有table-cell的外层div设置为flex布局，让内部单元格自动沿水平方向对齐，彻底规避inline元素的基线对齐问题：

#root > div {
  display: flex;
}

这种方式更符合现代布局逻辑，代码更简洁，也能避免后续其他布局问题。

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