如何让第三个按钮齐平排列在前两个并排按钮的下方？

你可以通过CSS Grid或Flexbox两种方式实现需求，以下是具体代码：

方案一：CSS Grid（更简洁） #

修改你的CSS和HTML代码如下：

CSS #

.device-buttons {
  padding: 0 1em 1em 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5em; /* 替代 ，控制按钮间间距，可按需调整 */
}

.device-buttons button:last-child {
  grid-column: 1 / -1; /* 让第三个按钮跨占整行，与前两个两端对齐 */
}

HTML #

<div class="devices">
  <div class="device-buttons">
    <button mat-raised-button
            color="primary"
            [disabled]="hasMaxDevices"
            matTooltip="{{disabledMessage || 'Add a single device'}}"
            (click)="addDevice()">Single Entry</button>
    <button mat-raised-button
            color="primary"
            [disabled]="hasMaxDevices"
            matTooltip="{{disabledMessage || 'Add multiple device'}}"
            (click)="batchDevices()">Batch Entry</button>
    <button mat-raised-button color="primary">Skip and Search Countries Only</button>
  </div>
</div>

方案二：Flexbox（布局更灵活） #

如果需要更灵活的布局调整，可以用这个方案：

CSS #

.device-buttons {
  padding: 0 1em 1em 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 控制上下按钮组的间距 */
}

.button-row {
  display: flex;
  gap: 0.5em; /* 控制前两个按钮的间距 */
}

.device-buttons button:last-child {
  align-self: stretch; /* 让第三个按钮宽度与上方按钮行一致 */
}

HTML #

<div class="devices">
  <div class="device-buttons">
    <div class="button-row">
      <button mat-raised-button
              color="primary"
              [disabled]="hasMaxDevices"
              matTooltip="{{disabledMessage || 'Add a single device'}}"
              (click)="addDevice()">Single Entry</button>
      <button mat-raised-button
              color="primary"
              [disabled]="hasMaxDevices"
              matTooltip="{{disabledMessage || 'Add multiple device'}}"
              (click)="batchDevices()">Batch Entry</button>
    </div>
    <button mat-raised-button color="primary">Skip and Search Countries Only</button>
  </div>
</div>

说明 #

• 两种方案都去掉了 ，改用gap属性控制间距，更规范且易于调整
• Grid方案通过列布局直接让第三个按钮跨占整行，代码更简洁
• Flexbox方案通过嵌套容器实现，适合后续需要调整按钮排列逻辑的场景

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