如何在不改JS且不嵌套div的情况下实现Flexbox内按钮水平排列？

完全不用改JS代码，靠CSS就能搞定，给你两种可行方案：

方案1：利用Flexbox的order和flex-wrap属性 #

• 给父容器添加flex-wrap: wrap，允许子元素换行
• 给所有按钮设置order: 1，让按钮统一排在输入字段后面（输入字段默认order: 0，无需额外设置）
• 给按钮设置基础的尺寸和间距，再用justify-content调整按钮的水平对齐方式

示例CSS代码：

/* 父容器样式 */
.parent-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* 按钮样式 */
.parent-container .button {
  order: 1;
  flex: 0 1 auto;
  margin: 0 5px;
}

/* 可选：调整按钮组的水平对齐 */
.parent-container {
  justify-content: center;
}

方案2：改用Grid布局（更直观） #

直接把父容器的Flex布局换成Grid，通过网格行区分输入字段和按钮区域：

/* 父容器样式 */
.parent-container {
  display: grid;
  grid-template-columns: 1fr; /* 输入字段占满整列 */
  gap: 10px; /* 元素间的间距 */
}

/* 按钮样式：所有按钮合并到同一行，水平排列 */
.parent-container .button {
  grid-column: 1 / -1; /* 跨满整列 */
  display: inline-flex;
  justify-content: center; /* 可换成space-between/space-around调整对齐方式 */
}

两种方案都不需要修改你的JS逻辑，只调整CSS就能实现按钮在输入字段下方水平排列的效果。

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