如何在一行内无换行展示左、中、右三组不同数量的元素？

核心布局实现（Flex 方案） #

利用 Flex 布局的 margin:auto 特性，无需包裹元素即可让三组复选框自动实现左对齐、居中、右对齐的效果，且不受左右组宽度差异影响：

/* 父容器样式 */
.checkbox-group-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 允许下方元素换行占满宽度 */
  gap: 10px; /* 控制元素间间距，可根据需求调整 */
}

/* 让第一个在所有.left之后的.middle元素左侧自动填充空间，推至中间区域 */
.left:last-of-type ~ .middle {
  margin-left: auto;
}

/* 让最后一个.middle元素右侧自动填充空间，确保中间组整体居中 */
.middle:last-of-type {
  margin-right: auto;
}

/* 下方元素强制占满整行宽度 */
.below-content {
  flex-basis: 100%;
  width: 100%;
  /* 下方元素的其他样式 */
}

无JS语言切换实现 #

借助 CSS 的 :checked 伪类和通用兄弟选择器 ~，根据选中的语言单选框自动显示对应语言的复选框：

HTML 结构示例

<div class="checkbox-group-container">
  <!-- 语言选择单选框 -->
  <input type="radio" name="language" id="lang-en" checked>
  <label for="lang-en">English</label>
  
  <!-- 英文复选框组 -->
  <input type="checkbox" class="left en-lang" id="en-left1">
  <label for="en-left1">Left Option 1</label>
  <input type="checkbox" class="left en-lang" id="en-left2">
  <label for="en-left2">Left Option 2</label>

  <input type="checkbox" class="middle en-lang" id="en-middle1">
  <label for="en-middle1">Middle Option 1</label>
  <input type="checkbox" class="middle en-lang" id="en-middle2">
  <label for="en-middle2">Middle Option 2</label>

  <input type="checkbox" class="right en-lang" id="en-right1">
  <label for="en-right1">Right Option 1</label>

  <!-- 法语复选框组 -->
  <input type="radio" name="language" id="lang-fr">
  <label for="lang-fr">Français</label>
  
  <input type="checkbox" class="left fr-lang" id="fr-left1">
  <label for="fr-left1">Option Gauche 1</label>

  <input type="checkbox" class="middle fr-lang" id="fr-middle1">
  <label for="fr-middle1">Option Milieu 1</label>
  <input type="checkbox" class="middle fr-lang" id="fr-middle2">
  <label for="fr-middle2">Option Milieu 2</label>
  <input type="checkbox" class="middle fr-lang" id="fr-middle3">
  <label for="fr-middle3">Option Milieu 3</label>

  <input type="checkbox" class="right fr-lang" id="fr-right1">
  <label for="fr-right1">Option Droite 1</label>
  <input type="checkbox" class="right fr-lang" id="fr-right2">
  <label for="fr-right2">Option Droite 2</label>

  <!-- 下方占宽元素 -->
  <div class="below-content">
    该元素将自动占满容器整行宽度
  </div>
</div>

对应 CSS 控制显示

/* 默认隐藏所有语言专属复选框 */
.en-lang, .fr-lang {
  display: none;
}

/* 选中英文时显示英文复选框 */
#lang-en:checked ~ .en-lang {
  display: inline-flex;
  align-items: center;
}

/* 选中法语时显示法语复选框 */
#lang-fr:checked ~ .fr-lang {
  display: inline-flex;
  align-items: center;
}

/* 可选：美化复选框与标签样式 */
input[type="checkbox"] + label {
  margin-left: 4px;
  cursor: pointer;
}

方案优势 #

1. 完全无需 JavaScript，纯 CSS 实现布局与语言切换，满足禁用 JS 的场景需求；
2. 无需额外包裹元素，避免父选择器缺失带来的样式影响；
3. 中间组始终保持居中，不受左右组元素数量/宽度变化影响；
4. 下方元素通过 flex-basis:100% 自动占满整行，解决 grid 方案中下方元素无法占宽的问题。

内容的提问来源于stack exchange，提问作者Cédric