如何在不修改HTML的前提下将列表在指定元素后拆分为两列布局

需求说明 #

现有6个列表项的无序列表，不允许改动原有HTML结构，需要实现两列布局：左列展示前3个列表项，右列展示后3个列表项，固定在第3项之后拆分。
原有HTML结构如下：

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

实现方法 #

纯CSS就能实现，不需要改任何HTML代码，优先推荐Grid方案，逻辑简单不会错位：

/* 重置ul默认样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 开启网格布局，设置两列等宽 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 需要列间距的话加这行，数值按需调整：gap: 0 24px; */
}

/* 前3个li强制分配到左列 */
ul li:nth-child(-n+3) {
  grid-column: 1;
}

/* 第4个及以后的li强制分配到右列 */
ul li:nth-child(n+4) {
  grid-column: 2;
}

如果需要兼容不支持Grid的老旧浏览器，可以用浮动方案：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 清除内部浮动影响 */
}

ul li {
  width: 50%;
  box-sizing: border-box;
  /* 需要列间距的话把宽度改成48%，再给左列加margin-right、右列加margin-left即可 */
}

/* 前3项左浮动，依次排列在左列 */
ul li:nth-child(-n+3) {
  float: left;
  clear: left;
}

/* 后3项右浮动，依次排列在右列 */
ul li:nth-child(n+4) {
  float: right;
  clear: right;
}

注意：不要直接用column-count: 2做这个效果，这个属性是按照内容高度自动分配列位置，没法保证固定在第3项拆分，后续内容高度变动时很容易出现错位。

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