如何将按钮改为横向排列并实现页面响应式适配？

问题原因 #

按钮纵向排列的核心原因：

• 每个按钮被独立的<form>标签包裹，form默认是块级元素，会独占一行；
• 按钮本身设置了display:block，同样会强制独占一行。

修改代码 #

更新CSS中.btn-group、form和button的样式：

.btn-group {
  display: flex;
  justify-content: center;
  gap: 15px; /* 按钮间的固定间距 */
}

.btn-group form {
  margin: 0; /* 清除form默认外边距 */
}

button {
  margin: 7px; /* 移除auto，避免强制居中换行 */
  display: inline-block; /* 取消block属性，允许横向排列 */
  /* 其他原有样式保留 */
}

原理说明 #

• Flexbox布局（display:flex）是当前实现横向排列最直观的方案，比float更易维护。给按钮容器设置flex后，其子元素（form）会自动横向排列；
• justify-content:center让按钮组在容器内水平居中，gap直接控制子元素间距，无需通过margin手动调整；
• 清除form的默认外边距、修改按钮的display属性，避免元素强制独占一行，确保横向排列生效。

问题原因 #

标题使用固定像素值（130px、80px）作为字号，当屏幕宽度小于文本总宽度时，文本会超出屏幕——固定像素值不会随屏幕尺寸动态调整。

修改代码 #

方案一：使用clamp()函数（推荐，兼顾最小/最大字号） #

.title {
  font-size: clamp(60px, 15vw, 130px); /* 最小60px，最大130px，中间随屏幕宽度缩放 */
  /* 其他原有样式保留 */
}

.subtitle {
  font-size: clamp(30px, 8vw, 80px); /* 最小30px，最大80px，中间随屏幕宽度缩放 */
  /* 其他原有样式保留 */
}

补充优化：避免文本贴边 #

给容器添加内边距，提升小屏幕体验：

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 0 20px; /* 左右内边距 */
  box-sizing: border-box; /* 内边距不增加容器总宽度 */
}

原理说明 #

• clamp(min, preferred, max)是CSS响应式函数：当屏幕足够大时使用最大字号，屏幕极小时使用最小字号，中间状态按preferred值（vw单位，视窗宽度百分比）动态缩放，实现平滑的响应式效果；
• vw单位是视窗宽度的百分比（1vw = 屏幕宽度的1%），确保字号随屏幕宽度成比例变化，始终适配屏幕；
• box-sizing:border-box保证内边距不会额外增加容器宽度，避免布局偏移。

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