CSS实现按钮等宽，空间足够时同行、不足时每行一个布局

解决方案 #

第一步：调整HTML结构

移除原有代码中所有的<br>标签，该标签会强制按钮换行，是导致始终纵向排列的核心原因，修改后代码如下：

<div class="answers">
    <button class="button">A</button>
    <button class="button">B</button>
    <button class="button">C</button>
    <button class="button">D</button>
</div>

第二步：CSS实现（兼容Chrome 105+、Firefox 110+、Safari 16+）

使用CSS网格+容器查询实现需求，无需提前获知按钮宽度：

.answers {
  /* 开启容器查询，用于判断当前可用宽度 */
  container-type: inline-size;
  display: inline-grid;
  /* 默认横向排列，所有列宽自动相等，匹配内容最长的按钮宽度 */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px; /* 可自定义按钮间距 */
  max-width: 100%;
}

.button {
  /* 避免按钮文字折行，保证宽度计算准确 */
  white-space: nowrap;
}

/* 可用宽度不足以横向放下4个按钮时，切换为纵向单列布局 */
@container (width < min-content) {
  .answers {
    grid-auto-flow: row;
  }
}

兼容全浏览器方案（搭配少量JS）

如果需要兼容不支持容器查询的旧浏览器，可以用少量JS辅助判断布局：

/* 基础样式 */
.answers {
  display: inline-grid;
  grid-auto-columns: 1fr;
  gap: 8px;
  max-width: 100%;
}
.button {
  white-space: nowrap;
}

const answersContainer = document.querySelector('.answers');
function adjustLayout() {
  // 临时切换为横向计算总宽度
  answersContainer.style.gridAutoFlow = 'column';
  const isOverflow = answersContainer.scrollWidth > answersContainer.parentElement.clientWidth;
  answersContainer.style.gridAutoFlow = isOverflow ? 'row' : 'column';
}
// 初始化和窗口尺寸变化时重新计算布局
window.addEventListener('resize', adjustLayout);
adjustLayout();

以上方案完全满足两个核心需求：所有按钮宽度自动匹配最长内容的按钮，仅存在全横向一行、全纵向一列两种布局，不会出现2x2等中间状态。

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