CSS 用于带有问题和选项的 2 列布局，但选项看起来呈锯齿状

Question

我正在使用带有选项卡布局的 Material 制作一个 Angular 应用程序，其中我创建了一个 2 列调查问卷，其中包含问题和选项，但这些选项看起来参差不齐；我希望它们看起来垂直对齐。问题是有些选项很长，我担心它们可能会在洗牌中被遗漏。而且，对视力也不太美观。见下图：

我尝试过使用 mat-tile-list 和其他 CSS 技巧，但似乎没有任何效果，它们最终并排对齐并且呈锯齿状。你能把我推向正确的方向吗？ 这是我到目前为止所尝试过的：

CSS代码：

.grid-container {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust as needed */
  position: relative;
  overflow: auto; 
}

.grid-column {
  flex: 1 1 45%; /* Adjust the width of the columns as needed */
  display: flex;
  flex-direction: column;
  /* position: absolute; */
}

.question {
  font-weight: bold;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Adjust as needed */
}

Angular HTML 代码：

<mat-tab label="Perfil del Individuo">
  <div class="grid-container">
    <div class="grid-column" *ngFor="let question of questions; let i = index">
      <form [formGroup]="needsQuestionsForm">
        <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>
      </form>
    </div>
  </div>
</mat-tab>

这是整个 HTML 组件：

<div class="row">
  <!-- Card column -->
  <div class="col-12">
    <mat-card>
      <mat-card-content>
        <h4 class="mb-32">Needs Profile</h4>
        <mat-tab-group mat-stretch-tabs="false" class="demo-tab-group">
          <mat-tab label="Physical">
            <div class="demo-tab-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
              Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
              In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
              feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
              orci enim rutrum enim, vel tempor sapien arcu a tellus.
            </div>
          </mat-tab>
          
          <mat-tab label="Mental">
            <div class="demo-tab-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
              Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
              In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
              feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
              orci enim rutrum enim, vel tempor sapien arcu a tellus.
              <br />
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
              Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
              In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
              feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
              orci enim rutrum enim, vel tempor sapien arcu a tellus.
            </div>
          </mat-tab>
          <mat-tab label="Participant's Profile">
            <div class="grid-container">
              <div class="grid-column" *ngFor="let question of questions; let i = index">
                <form [formGroup]="needsQuestionsForm">
                  <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>
                </form>
              </div>
            </div>
          </mat-tab>
          <mat-tab label="Social Determinants of Health">
            <div class="demo-tab-content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
              Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
              In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
              feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
              orci enim rutrum enim, vel tempor sapien arcu a tellus.
              <br />
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
              Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
              In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
              feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
              orci enim rutrum enim, vel tempor sapien arcu a tellus.
            </div>
          </mat-tab>
        </mat-tab-group>
      </mat-card-content>
    </mat-card>
  </div>
</div>

Answer 1

问题和选项中 mat-list-item 的组合实现了垂直对齐以及水平和框架对齐的 CSS 技巧。

HTML 组件

<mat-tab label="Substance Use">
  <div class="grid-container">
     <div class="grid-column" *ngFor="let question of questions; let i = index">
       <mat-list>
         <mat-list-item class="question">{{ i+1 }}. {{ question.question }}</mat-list-item>
         <div class="options">
          <mat-radio-group aria-label="Select an option" [formControlName]="'option' + (i + 1)">
            <mat-list-item *ngFor="let option of question.options">
              <mat-radio-button [value]="option.id">
                {{ option.option }} 
              </mat-radio-button>
            </mat-list-item>
          </mat-radio-group>
         </div>
      </mat-list>
    </div>
  </div>
</mat-tab>

CSS 组件：

.grid-container {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; 
}

.grid-column {
  flex: 1 0 45%; 
  display: flex;
  flex-direction: column;
}

.question {
  font-weight: bold;
  min-height: 48px; /* Adjust as needed */
}

.options {
  display: flex;
  flex-direction: column;
  gap: 5px; 
}

.mat-radio-button {
  margin-top: 5px;
}

.mat-radio-button:first-child {
  margin-top: 0;
}