如何用CSS设置表单中Checkbox和Radio按钮的布局样式？

我希望表单选项展示成这样的格式：

You're in: ()Europe ()Africa
            ()Australia ()Asia ()America

What are your hobbies: []Swimming []Cooking []Shopping
                       []Sport []Dance []Sing

但实际显示效果是所有选项排在同一行：

You're in: ()Europe ()Africa ()Australia ()Asia ()America
What are your hobbies: []Swimming []Cooking []Shopping []Sport []Dance []Sing

我的HTML代码如下：

<div class="container radio-container">
   <span>You are in:</span>
   <input type="radio" id="europe" name="regions" value="europe">Europe
   <input type="radio" id="africa" name="regions" value="africa">Africa
   <input type="radio" id="australia" name="regions" value="australia">Australia
   <input type="radio" id="asia" name="regions" value="asia">Asia
   <input type="radio" id="america" name="regions" value="america">America
</div>

<div class="container checkbox-container">
   <span>What are your hobbies:</span>
   <input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming
   <input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking
   <input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping
   <input type="checkbox" id="sport" name="sport" value="sport">Sport
   <input type="checkbox" id="dance" name="dance" value="dance">Dance
   <input type="checkbox" id="sing" name="sing" value="sing">Sing
</div>

实现方法 #

以下两种CSS方案可以实现你需要的换行对齐效果：

方法一：Grid布局（推荐，自适应更强）

通过Grid布局精准控制元素位置，无需手动计算宽度：

/* 为容器设置Grid布局 */
.radio-container, .checkbox-container {
  display: grid;
  grid-template-columns: auto repeat(4, max-content);
  gap: 10px; /* 选项间的间距，可按需调整 */
}

/* 让标题文本占满整行 */
.radio-container span, .checkbox-container span {
  grid-column: 1 / -1;
}

/* 将第4个及之后的选项放到第二行的起始对齐位置 */
.radio-container input:nth-child(n+4),
.checkbox-container input:nth-child(n+4) {
  grid-column: 2;
}

方法二：Flex布局+手动缩进

如果更习惯Flex布局，可通过换行+左边距实现对齐：

/* 容器设置Flex并允许换行 */
.radio-container, .checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 让标题独占一行 */
.radio-container span, .checkbox-container span {
  width: 100%;
}

/* 给第二行选项设置左边距，数值匹配标题宽度即可 */
.radio-container input:nth-child(n+4),
.checkbox-container input:nth-child(n+4) {
  margin-left: 130px; /* 可根据实际标题宽度调整 */
}

内容的提问来源于stack exchange，提问作者sos.call.112