求助：如何实现复选框列表按字母顺序垂直排列？

我完全懂你的困扰——明明单列时复选框能乖乖按字母顺序垂直排列，可容器宽度够显示多列时，它们就变成水平填充了，试了display:block、float:left都没解决，确实闹心。咱们来搞定这个问题：

问题根源 #

你当前给label用了display: inline-block，这种布局逻辑是水平优先的：先把第一行的空间填满，才会换到下一行，所以就出现了Austria、Bulgaria、Croatia挤在第一行，Denmark、Estonia跟着去第二行的情况，和你想要的垂直分栏完全相反。

最优解决方案：CSS 多列布局（Columns） #

CSS的columns属性天生就是干这个的——它会让元素先填满第一列，再自动流到第二列，完美匹配你要的垂直字母序排列需求。

修改你的CSS代码如下：

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  padding: 10px 0px 0px 5px;
  background-color: #fcfcfc;
  overflow-y: scroll;
  font-family: "Verdana";
  font-size: 11px;
  /* 核心多列配置 */
  columns: 213px; /* 每列宽度和label宽度保持一致 */
  column-gap: 7px; /* 和你原来设置的label右侧margin匹配 */
}

.CountryListBoxClass_prodn label {
  display: block; /* 改成block，避免inline-block的额外水平间隙 */
  border: 1px solid transparent;
  width: 213px;
  background-color: white;
  margin: 0px 0px 2px 0px; /* 去掉右侧margin，用column-gap控制列间距 */
  break-inside: avoid; /* 防止单个复选框标签被拆分到两列 */
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

为什么这招管用？ #

• columns: 213px：指定每列的固定宽度，容器会自动根据自身宽度计算能显示几列
• break-inside: avoid：保证每个复选框标签完整地呆在一列里，不会被劈成两半
• 把label改成display:block：消除inline-block自带的微小水平间距，让列布局更规整

备选方案：Flexbox 垂直换行 #

如果你更习惯用flexbox，也可以通过设置垂直方向的flex流来实现，但这种方式需要给容器加一个固定高度才能触发换行：

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  padding: 10px 0px 0px 5px;
  background-color: #fcfcfc;
  overflow-y: scroll;
  font-family: "Verdana";
  font-size: 11px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px; /* 必须设置固定高度才会换行 */
  gap: 2px 7px; /* 第一个值是行间距，第二个是列间距 */
}

.CountryListBoxClass_prodn label {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  width: 213px;
  background-color: white;
}

效果验证 #

修改后，当容器宽度足够显示2列及以上时，复选框会按字母顺序垂直排列：
第一列：Austria → Denmark → Estonia → Hungary → Latvia
第二列：Bulgaria → Germany → Ireland → Malta
完全符合你想要的排列方式。

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