如何实现HTML表单内input按钮居中及响应式布局

你原有的HTML代码无需修改，仅调整CSS即可实现需求，修改后的完整CSS如下：

/* 全局统一盒模型，避免内边距、边框撑大元素宽度 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main_buttons {
  width: 100%;
  /* 左右预留20px边距 */
  padding: 0 20px;
}

/* 给form表单添加弹性布局控制按钮排列规则 */
.select_form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 按钮水平居中 */
  justify-content: center;
  /* 按钮之间的间距，可按需调整 */
  gap: 8px;
}

.btn-select {
  background-color: #7a7979;
  border-radius: 4px;
  overflow: auto;
  /* 弹性自适应宽度：基础宽度200px，屏幕足够时最大宽度250px，自动适配屏幕尺寸 */
  flex: 1 1 200px;
  max-width: 250px;
  height: 200px;
  /* 按钮内部的复选框和文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 提交按钮单独占一行居中 */
.city_submit_button {
  flex: 0 0 100%;
  max-width: 120px;
  margin-top: 16px;
}

核心调整点 #

• 全局统一盒模型规则，避免设置边距后元素宽度超出视口范围
• 外层容器.main_buttons添加左右20px内边距，同时保持100%宽度占满页面
• 表单元素开启flex弹性布局，支持自动换行、内容居中，解决原布局只能单行显示的问题
• 选项按钮宽度改为弹性自适应规则，大屏保持固定宽度排列，小屏自动缩放适配，兼容不同尺寸的浏览器窗口
• 单独设置提交按钮独占一行居中，和上方选项区分层级

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