仅用CSS能否将列表拆分为两列垂直布局？

直接用CSS多列布局就能搞定，不用设置固定高度，浏览器会自动把列表项均匀分配到两列，完美匹配你要的垂直排列效果。

核心CSS代码 #

ul {
  columns: 2;
  column-gap: 2rem; /* 可选：调整两列之间的间距 */
  list-style: none; /* 可选：移除默认列表圆点 */
  padding: 0; /* 可选：移除默认内边距 */
}

/* 可选：防止单个列表项被拆分到两列 */
li {
  break-inside: avoid;
}

完整示例代码 #

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

原理说明 #

• columns: 2 是column-count: 2的简写，直接指定列表分为2列。
• 浏览器会自动计算每列的元素数量，7个元素会被分成第一列4个、第二列3个，完全符合你要的布局。
• break-inside: avoid 用来避免单个列表项被跨列拆分，保证每个项的完整性。
• 整个布局不需要设置任何固定高度，会根据内容自动适配。

如果你想用Grid布局实现，也可以试试下面的代码，但需要预估行数，灵活性不如多列布局：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column; /* 让元素按列优先排列 */
  grid-template-rows: repeat(4, auto); /* 4行足够容纳7个元素 */
  column-gap: 2rem;
  list-style: none;
  padding: 0;
}

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