如何实现HTML列表3个项在上排3个在下，解决列表横向溢出问题

你可以通过CSS Grid布局实现6个列表项分2行、每行3个的效果，同时解决横向溢出问题，添加以下CSS规则即可：

/* 重置列表默认样式 */
.container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 开启grid布局 */
  display: grid;
  /* 平分为3等宽列 */
  grid-template-columns: repeat(3, 1fr);
  /* 列表项间距，可自行调整 */
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.container ul li {
  /* 统一盒模型，避免内边距/边框撑宽元素 */
  box-sizing: border-box;
  /* 长文本自动折行，避免撑破容器 */
  overflow-wrap: break-word;
  /* 可选：自定义列表项内边距、边框等样式 */
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

规则说明 #

• grid-template-columns: repeat(3, 1fr) 会自动将容器宽度平分为3份，每个列表项占1份宽度，无需手动计算像素值
• Grid布局会自动将超出3列的元素折到下一行，6个列表项恰好排列为2行，不会出现横向排列溢出的问题
• 如需适配移动端，可添加媒体查询修改列数，比如屏幕宽度小于768px时改为1列：

@media (max-width: 768px) {
  .container ul {
    grid-template-columns: 1fr;
  }
}

布局参考效果 #

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