Angular中如何横向排列按钮？新增按钮后变为纵向问题

问题根源 #

1. 你给.creator-button-container设了display: inline-block，但flex-direction: row是Flex布局独有的属性，对inline-block容器完全无效，等于白写。
2. 第二个按钮被嵌套在<div *ngIf="isChannelReadyForBids">里，div是块级元素，默认会独占一整行，直接把后面的按钮挤到下一行去了。

修复步骤 #

1. 把外层容器改成Flex布局

Flex是实现横向排列最省心的方式，替换掉原来的inline-block设置：

.creator-button-container {
  background-color: red;
  display: flex;
  flex-direction: row; /* 这行可以省略，Flex默认就是横向排列 */
  gap: 10px; /* 可选，给按钮/按钮组之间加间距 */
  align-items: center; /* 让所有按钮垂直居中对齐 */
}

2. 干掉多余的嵌套div（最简洁的方式）

把包裹第二个按钮的div去掉，直接把*ngIf指令移到按钮标签上，避免块级元素占行：

<!-- 原来的代码 -->
<div *ngIf="isChannelReadyForBids">
  <button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for bidding</button>
</div>

<!-- 修改后 -->
<button *ngIf="isChannelReadyForBids" mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for bidding</button>

3. 统一内部按钮组的排列（可选）

如果要保留内部的div容器（比如第一个*ngIf的div），给这个容器也加Flex布局，确保组内按钮横向排列：

.creator-button-container > div {
  display: flex;
  gap: 10px; /* 组内按钮的间距 */
}

完整示例代码 #

修改后的HTML：

<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
  <div *ngIf="isChannelEditable">
    <button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
    <button *ngIf="isChannelReadyForBids" mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for bidding</button>
    <button mat-raised-button color="accent" type="submit">Save Channel</button>
  </div>
  
  <div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
    <button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
  </div>
</div>

修改后的CSS：

.creator-button-container {
  background-color: red;
  display: flex;
  gap: 15px; /* 按钮组之间的间距 */
  align-items: center;
}

.creator-button-container > div {
  display: flex;
  gap: 10px; /* 组内按钮的间距 */
}

这样改完，所有按钮都会横向排列，同时原来的ngIf逻辑完全保留。

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