Angular Material双列问卷选项垂直对齐问题求助

你的核心问题在于双列布局的实现方式导致问题块高度不一致时错位，同时长文本选项未做换行处理。以下是针对性的解决方案：

1. 重构双列布局（解决参差不齐问题） #

放弃用flex-wrap实现双列，改用CSS Grid布局——它能强制将内容分成固定列数，自动对齐每一行的问题块高度，彻底解决错位问题。

修改后的CSS： #

.grid-container {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两等宽列 */
  gap: 20px; /* 列间距 */
}

.question {
  font-weight: bold;
  margin-bottom: 10px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 选项间距 */
}

/* 处理长文本选项 */
.options mat-radio-button {
  white-space: normal; /* 允许文本换行 */
  display: flex;
  align-items: flex-start; /* 单选框与多行文本顶部对齐 */
}

.options mat-radio-button .mat-radio-label-content {
  padding-left: 8px; /* 微调单选框与文本间距 */
}

2. 优化HTML结构（减少冗余DOM） #

将form标签提到外层，避免每个问题块重复嵌套form，同时调整类名让语义更清晰：

修改后的问卷标签页HTML： #

<mat-tab label="Participant's Profile">
  <form [formGroup]="needsQuestionsForm" class="grid-container">
    <div class="question-block" *ngFor="let question of questions; let i = index">
      <div class="question">
        {{ i + 1 }}. {{ question.question }}
      </div>
      <div class="options">
        <mat-radio-group aria-label="Select an option" [formControlName]="'option' + (i + 1)">
          <mat-radio-button *ngFor="let option of question.options" [value]="option.id">
            {{ option.option }}
          </mat-radio-button>
        </mat-radio-group>
      </div>
    </div>
  </form>
</mat-tab>

为什么原来的方案失效？ #

你之前用flex-wrap: wrap实现双列时，每个问题块是独立的flex项——当第一行的两个问题块高度不同时，下一行的问题块会从最短项的下方开始排列，自然出现错位。而CSS Grid的grid-template-columns会强制划分两列，每一行的单元格高度自动匹配，从根源解决了对齐问题。

内容的提问来源于stack exchange，提问作者Jose Luis Roman