如何在响应式布局中合并列表项边框？附JSFiddle示例

当然有可行方案！完全不用修改HTML结构，只靠CSS就能搞定这个响应式布局下的边框问题。我给你整理了几个实用的技巧，按需选择：

方案1：负margin + 溢出隐藏（最简洁通用） #

这个方法利用负margin让相邻元素的边框重叠，再通过容器的溢出隐藏处理外层多余的边框，不管单行还是多行都能完美适配：

/* 容器：隐藏负margin带来的溢出边框 */
.top-nav {
  overflow: hidden;
}

/* 列表容器：设置弹性布局实现换行 */
.top-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

/* 列表项：添加边框 + 负margin让边框重叠 */
.top-nav li {
  border: 1px solid #ccc;
  padding: 8px 16px;
  margin: -1px; /* 关键：让相邻边框重叠，视觉上变成1px */
}

原理：每个列表项的负margin会让它和相邻元素的边框完全叠加，容器的overflow: hidden会把最外层超出的1px边框切掉，这样无论是单行还是换行后的多行，所有边框都会保持一致的1px宽度，而且每行首个元素的左边框也能正常显示。

方案2：CSS Grid 布局方案（适合喜欢Grid的场景） #

如果你更倾向于用Grid布局，这个方法和方案1思路类似，只是把Flex换成Grid：

/* 列表容器：Grid自动适配列数 */
.top-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 调整minmax值控制最小列宽 */
  gap: 0;
}

/* 列表项：添加边框 */
.top-nav li {
  border: 1px solid #ccc;
  padding: 8px 16px;
}

/* 容器：处理外层边框溢出 */
.top-nav {
  margin: -1px;
  overflow: hidden;
}

效果：和方案1完全一致，Grid布局在处理响应式列数时更灵活，适合需要更精确控制列宽的场景。

方案3：伪元素模拟边框（适合自定义边框样式） #

如果需要单独控制某条边框的样式（比如不同颜色、虚线），可以用伪元素来模拟边框：

.top-nav {
  position: relative;
}

.top-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.top-nav li {
  padding: 8px 16px;
  position: relative;
}

/* 添加右边框 */
.top-nav li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}

/* 添加下边框 */
.top-nav li::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

/* 移除每行最后一个元素的右边框（假设每行最多显示3个，调整3为你的最大列数） */
.top-nav li:nth-child(3n)::after {
  display: none;
}

/* 移除最后一行所有元素的下边框 */
.top-nav li:last-child::before,
.top-nav li:nth-last-child(2)::before,
.top-nav li:nth-last-child(3)::before { /* 数量和最大列数一致 */
  display: none;
}

/* 给容器添加上边框和左边框 */
.top-nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.top-nav::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}

说明：这个方法需要提前知道每行最多能显示的列数，适合固定列数的响应式场景，但好处是可以单独修改每个方向的边框样式，灵活性更高。

推荐优先用方案1或方案2，代码简洁、适配性强，完全满足你的需求。

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