CSS如何仅用单个ul列表实现按类名分组的两个并列列表块

你可以通过CSS Grid或Float两种纯CSS方案实现需求，无需修改现有HTML结构，也不需要引入JavaScript：

方案1：CSS Grid（推荐，现代浏览器兼容） #

利用Grid布局的列固定特性，直接将不同类的li分配到对应列，代码最简，灵活性最高：

/* 全局box-sizing配置，避免宽度溢出，可放在公共样式里 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  /* 定义两列等宽布局，可按需调整比例，比如 3fr 7fr 就是左3右7 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 两列之间的间距，可自定义 */
}

li.group1 {
  /* 所有group1固定在第一列 */
  grid-column: 1 / 2;
}

li.group2 {
  /* 所有group2固定在第二列 */
  grid-column: 2 / 3;
}

效果说明 #

所有group1类的li会自动归到左列按DOM原有顺序排列，所有group2类的li自动归到右列按DOM原有顺序排列，两列独立展示互不干扰。兼容Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+，覆盖99%以上的活跃浏览器。

方案2：Float（兼容旧版浏览器） #

如果需要兼容IE等旧版浏览器，可以用浮动+清除浮动的方案实现：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  overflow: hidden; /* 清除父容器浮动 */
}

li.group1 {
  float: left;
  width: calc(50% - 10px); /* 减去一半间距，和grid方案效果对齐 */
  clear: left; /* 保证每个group1都在左列新行，不会并排 */
  margin-right: 20px; /* 列间距 */
}

li.group2 {
  float: right;
  width: 50%;
  clear: right; /* 保证每个group2都在右列新行，不会并排 */
}

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