我帮你设计了一套结合CSS Grid和少量JavaScript的方案，既能让Checkbox根据屏幕宽度自动横向排列，又能让文本Input的宽度按Checkbox的列宽步进调整，完美实现对齐效果。

核心思路 #

1. 用CSS Grid让Checkbox自动适配屏幕宽度，尽可能排列最多的160px宽选项
2. 通过JavaScript动态计算当前Checkbox的列数，让文本Input的宽度匹配对应列数的总宽度，同时不超过整体容器的76%限制

完整代码实现 #

HTML结构 #

<div class="container">
  <!-- Checkbox组 -->
  <div class="checkbox-group">
    <label class="checkbox-item">
      <input type="checkbox"> 选项1
    </label>
    <label class="checkbox-item">
      <input type="checkbox"> 选项2
    </label>
    <label class="checkbox-item">
      <input type="checkbox"> 选项3
    </label>
    <label class="checkbox-item">
      <input type="checkbox"> 选项4
    </label>
    <label class="checkbox-item">
      <input type="checkbox"> 选项5
    </label>
  </div>

  <!-- 文本Input容器 -->
  <div class="input-group">
    <input type="text" placeholder="请输入内容">
  </div>
</div>

CSS样式 #

:root {
  --checkbox-width: 160px; /* 固定Checkbox宽度 */
  --gap: 10px; /* 元素间距，可选调整 */
}

.container {
  max-width: 1200px; /* 整体容器最大宽度，按需调整 */
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Checkbox组：自动排列尽可能多的列 */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--checkbox-width), 1fr));
  gap: var(--gap);
  margin-bottom: 1.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* 文本Input基础样式 */
.input-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

JavaScript逻辑（动态调整Input宽度） #

// 计算并更新Input宽度的函数
function syncInputWidthWithCheckboxes() {
  const container = document.querySelector('.container');
  const checkboxGroup = document.querySelector('.checkbox-group');
  const inputGroup = document.querySelector('.input-group');

  // 获取基础参数
  const checkboxWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--checkbox-width'));
  const gap = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--gap'));
  const maxInputWidth = container.offsetWidth * 0.76; // 限制为整体容器的76%

  // 计算当前Checkbox能排列的列数
  const availableWidth = checkboxGroup.offsetWidth;
  // 列数 = 可用宽度 / (Checkbox宽度 + 间距)，取整数
  const columnCount = Math.floor(availableWidth / (checkboxWidth + gap));
  
  // 计算Input目标宽度：列数*(Checkbox宽度+间距) - 间距（抵消最后一列的间距）
  let targetWidth = columnCount * (checkboxWidth + gap) - gap;
  // 确保不超过76%的最大限制
  targetWidth = Math.min(targetWidth, maxInputWidth);

  // 应用宽度
  inputGroup.style.width = `${targetWidth}px`;
}

// 初始化执行
syncInputWidthWithCheckboxes();
// 窗口大小变化时重新计算
window.addEventListener('resize', syncInputWidthWithCheckboxes);

效果说明 #

• Checkbox会根据屏幕宽度自动排列，每行尽可能显示最多的160px宽选项
• 文本Input的宽度会自动匹配当前Checkbox的列数总宽度，并且不会超过整体容器的76%
• 窗口大小变化时，Input宽度会实时更新，始终保持和Checkbox布局对齐

内容的提问来源于stack exchange，提问作者Mm-Art-In