如何实现带锚点链接的无序列表项两列水平对齐？

你想要把现有的锚点列表改成两列布局对吧？我整理了几个实用的实现方法，都能兼容你的现有HTML结构，不用大改代码：

思路1：用Flexbox布局（推荐，现代浏览器友好） #

Flexbox是现在做布局最灵活的方案之一，只需要给<ul>加几个属性就能轻松实现两列，还能自动处理换行和间距：

修改你的CSS：

.index-list {
  background: #F9FAFA;
  border-left: 4px solid #AAAEB7;
  margin: 3em 0;
  padding: 15px 20px; /* 加左右内边距，避免内容贴边 */
}
.index-list ul {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 1em 25px; /* 控制列表项之间的间距，第一个是上下，第二个是左右 */
  padding-left: 0; /* 去掉默认的ul内边距 */
}
.index-list li {
  list-style: none;
  width: calc(50% - 12.5px); /* 减去一半的左右间距，保证两列对齐 */
  margin: 0; /* 去掉原来的margin，用gap统一控制 */
}

这个方法的好处是不用处理浮动清除的问题，布局更稳定，而且响应式也容易调整——比如小屏幕改成单列，只需要把li的width改成100%就行。

思路2：用CSS Grid布局（更直观的网格控制） #

Grid布局专门用来做网格，实现两列的代码更简洁，逻辑也更清晰：

修改CSS：

.index-list {
  background: #F9FAFA;
  border-left: 4px solid #AAAEB7;
  margin: 3em 0;
  padding: 15px 20px;
}
.index-list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 直接定义两列，宽度平分 */
  gap: 1em 25px;
  padding-left: 0;
}
.index-list li {
  list-style: none;
  margin: 0;
}

Grid的优势是可以更精确地控制列宽、行数，甚至可以指定某个列表项跨列，适合后续需要扩展复杂布局的场景。

思路3：传统浮动布局（兼容旧浏览器） #

如果你需要兼容一些老浏览器（比如IE10及以下），可以用浮动来实现，不过要注意清除浮动，避免父元素高度塌陷：

修改CSS：

.index-list {
  background: #F9FAFA;
  border-left: 4px solid #AAAEB7;
  margin: 3em 0;
  padding: 15px 20px;
  overflow: hidden; /* 清除浮动，让父元素包裹子元素 */
}
.index-list ul {
  padding-left: 0;
}
.index-list li {
  list-style: none;
  float: left;
  width: 50%;
  margin: 0.7em 0; /* 只保留上下margin，左右用padding控制间距 */
  box-sizing: border-box; /* 确保width包含padding和border，避免溢出 */
  padding-right: 25px; /* 控制两列之间的间距 */
}

这个方法需要注意清除浮动（这里用了overflow: hidden），而且列宽计算要考虑padding，避免布局错位。

不管用哪种方法，你的HTML结构都不需要改动，锚点链接的功能也完全不受影响，点击依然能跳转到对应ID的内容。

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