使用Flex实现ngFor文本框横向排列失效问题排查

问题出在父组件的布局设置上：.yearly类使用了flex-direction: column，这会让循环生成的子组件纵向堆叠，而非横向排列。同时子组件内部没有统一的对齐规则，容易出现元素错位。

修改步骤： #

1. 调整父组件布局，实现横向排列
   修改父组件的.yearly样式，将flex方向改为row：

.maintenance-section {
  width: 1250px !important;
}

.yearly {
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  gap: 16px; /* 调整间距，提升可读性 */
  max-width: fit-content;
}

2. 统一子组件内部元素对齐规则
   为了让每个子项的标签和输入框对齐，给子组件添加固定宽度和对齐布局：

如果希望标签和输入框在同一行，子组件CSS修改为：

.maintenance-cost{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 150px; /* 固定子项宽度 */
}

label {
  position: relative;
  font-weight: bold;
  width: 60px; /* 固定标签宽度，避免因文本长度错位 */
  text-align: right;
}

.required::after {
  content: '*';
  color: #CC0000;
  position: absolute;
  left: -10px;
}

.year {
  width: 80px; /* 固定输入框宽度 */
  text-align: right; /* 数值类输入框推荐右对齐 */
}

如果希望标签在上、输入框在下的纵向布局，子组件CSS修改为：

.maintenance-cost{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}

label {
  position: relative;
  font-weight: bold;
  margin-bottom: 4px;
}

.required::after {
  content: '*';
  color: #CC0000;
  position: absolute;
  left: -10px;
}

.year {
  width: 80px;
  text-align: right;
}

这样修改后，ngFor生成的所有文本框就能整齐横向排列，且内部元素对齐一致。

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