移动端按钮堆叠问题：如何实现按钮同行居中显示？

直接用Flexbox布局就能搞定，给按钮的父容器加下面的CSS代码（把.button-container换成你实际的容器类名/选择器）：

.button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 1rem;
}

.button-container button {
  flex-shrink: 0;
  min-width: fit-content;
  white-space: nowrap;
}

代码说明： #

• display: flex：让按钮在同一行排列
• justify-content: center：按钮组整体水平居中
• gap: 1rem：给按钮之间留间距，避免挤在一起
• flex-wrap: nowrap：强制按钮不换行，保持在一行
• overflow-x: auto：遇到极端窄屏时，按钮组可以横向滚动，不会挤压变形
• flex-shrink: 0：禁止按钮被压缩
• white-space: nowrap：按钮文字不换行，保证按钮宽度稳定

如果你的按钮有固定宽度需求，把min-width: fit-content改成具体数值比如120px就行；要是父容器本身有多余的padding/margin，记得调整一下避免影响布局。

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