复选框布局异常：仅两个同行其余换行问题求助

问题原因 #

你这个问题是HTML标签嵌套错误导致的：代码里的<label class="in-line" for="pasta">标签未闭合，后面所有的复选框label都被包裹在这个未闭合的标签里了；再加上全局设置了label { display: block; }，后面的内容都被当成这个block级标签的子元素，自然就被挤到下一行了。

修复方案 #

1. 修正HTML标签嵌套

给未闭合的pasta标签补上</label>，确保每个复选框的label都是独立闭合的，修改后的这部分HTML如下：

<label for="type-of-food" class="text-size">
  <label class="in-line" for="pizza"><input id="pizza" type="checkbox" name="type-of-food" value="Pizza" checked>Pizza</label>
  <label class="in-line" for="burgers"><input id="burgers" type="checkbox" name="type-of-food" value="Burgers">Burgers</label>
  <label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta</label>
  <label class="in-line" for="seafood"><input id="seafood" type="checkbox" name="type-of-food" value="Seafood">Seafood</label>
  <label class="in-line" for="sandwiches"><input id="sandwiches" type="checkbox" name="type-of-food" value="Sandwiches">Sandwiches</label>
  <label class="in-line" for="salads"><input id="salads" type="checkbox" name="type-of-food" value="Salads">Salads</label>
  <label class="in-line" for="desserts"><input id="desserts" type="checkbox" name="type-of-food" value="Desserts">Desserts</label>
  <label class="in-line" for="beverage"><input id="beverage" type="checkbox" name="type-of-food" value="Beverage">Beverage</label>
</label>

2. 优化CSS让布局更灵活

如果希望复选框能根据容器宽度自动换行填满空间，可以给包裹它们的外层label（带text-size类的标签）添加flex布局，让排列更合理：

.text-size {
  font-size: 0.9em;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选，给复选框之间添加间距 */
}

这样所有复选框会自动适配容器宽度换行，不会出现只显示两个就换行的情况。

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