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

Question

如何放置按钮以使其保持固定？

我有一个 Angular 应用程序，当显示第三个选项以进行多项选择时，下一步和后退按钮会向下移动。

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

有没有办法让按钮停留在一个位置？我尝试在 css 和 margin-bottom 中使用 position 属性，但没有成功。

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 对此进行调整。