Angular开发按钮布局求助：前两按钮同行，最后一个单独换行

你的HTML结构没问题，问题出在样式布局上，修改SCSS代码即可实现需求：

button {
  margin-right: 20px;
}

.action-buttons {
  display: flex;
  // 若要保留原位置，就用下面这行替代justify-content
  // margin-left: 250px;
  justify-content: center; // 让两个按钮居中排列
  margin-bottom: 15px; // 与下方返回按钮拉开间距
}

.back-button {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

// 可选：移除第二个按钮的右侧多余边距
.action-buttons .btn:last-child {
  margin-right: 0;
}

核心调整点： #

• 把.action-buttons的display:block改成display:flex，这样内部两个按钮会自动在同一行排列，flex布局是处理横向排列最简便的方式。
• 用justify-content:center让按钮组居中，如果你希望保留原有的左偏移位置，直接换成margin-left:250px就行，不影响同行效果。
• 给.back-button加width:fit-content，确保容器只适配按钮宽度，避免占满整行，让居中更精准。
• 添加margin-bottom是为了让上下按钮组之间有视觉间距，提升页面美观度。

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