导致按钮上下移动的额外选项

Question

您如何定位按钮使其保持固定状态？

我有一个Angular应用程序，当第3个选项显示为多项选择时，next和back按钮向下移动。

有些问题只有2个选项，有些只有3个选项。

有没有一种方法可以使按钮停留在一个位置？我尝试在CSS和position中使用margin-bottom属性，但是没有运气。

2个选项

3个选项

CSS

button {
  background-color: #004273;
  font-family: 'Roboto';
  color: white;
  border: 2px solid #93b9dd;
  border-radius: 8px;
  padding-top: 2%;
  padding-bottom: 2%;
  font-size: 1em;
}

.buttons2 {
  width:48%;
  float: right;
}

.buttons1 {
  width: 48%;
  float: left;
}

HTML

<h2 style="color: white;" align="center">{{statement}}</h2>
<h2 style="color: white;" align="center">{{question}}</h2>
<div class="radio-{{questionType}} col-sm-4 col-sm-offset-4 col-xs-offset-4">
  <div class="form-check">
    <mat-radio-group [(ngModel)]="selectedValue" class="options">
      <mat-radio-button value="{{radio1}}">{{radio1}}</mat-radio-button> <br>
      <mat-radio-button value="{{radio2}}">{{radio2}}</mat-radio-button> <br>
      <span *ngIf="radio3">
        <mat-radio-button value="{{radio3}}">
          {{radio3}} 
        </mat-radio-button>
      </span>
    </mat-radio-group>
  </div>
</div>
<div class="row">
  <div class="col-sm-6 col-sm-offset-3" style="padding-top: 2%;">
    <button *ngIf="state !== 1; else disabled_btn" class="buttons1 btn btn-primary" (click)="onClickedBack.emit(selectedValue)">BACK</button>
    <ng-template #disabled_btn>
      <button class="buttons1 btn" (click)="onClickedBack.emit(selectedValue)" disabled>BACK</button>
    </ng-template>
    <button class="buttons2 btn btn-primary" (click)="onClickedNext.emit(selectedValue)">NEXT</button>
  </div>
</div>

Answer 1

您可以使用:nth-child() CSS选择器来修改选项的行为。

.options > :nth-child(3) {
  height: 0;
  overflow-y: visible;
}

以上内容选择了.options类元素组的第3个直接子元素，删除了高度，但确保它仍然显示。您可能需要根据其他CSS进行调整。