如何用HTML/CSS实现换行后节点间的水平链式连接结构？

你的核心问题是flex换行后，无法处理跨行的垂直连线以及行内节点间的水平连线。可以通过伪元素+CSS选择器来实现，无需额外<hr>标签，结构更简洁。

实现思路 #

1. 保留flex布局实现节点自动换行，用伪元素为节点生成右侧水平连线和跨行垂直连线。
2. 通过CSS选择器控制连线显示逻辑：隐藏每行最后一个节点的右侧连线，给换行后的第一个节点添加顶部垂直连线，连接上一行的最后一个节点。
3. 用gap属性替代margin，统一控制节点间的间距，保证连线与布局对齐。

完整代码实现 #

CSS

.wrapper-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px; /* 控制节点间距，与连线宽度一致 */
  position: relative;
}

.nodeValue {
  width: 432px;
  text-align: center;
  cursor: default;
  border: 2.5px solid black;
  padding: 2px 10px;
  border-radius: 20px;
  position: relative;
}

/* 节点右侧的水平连线：除最后一个节点外都显示 */
.nodeValue:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50px; /* 与gap值匹配 */
  width: 50px;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
}

/* 跨行垂直连线：给换行后的第一个节点添加顶部连线 */
.nodeValue:nth-child(3)::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 30px; /* 垂直连线高度，可按需调整 */
  background-color: black;
  transform: translateX(-50%);
}

HTML

<div class="wrapper-chain">
  <div class="nodeValue">Node 1</div>
  <div class="nodeValue">Node 2</div>
  <div class="nodeValue">Node 3</div>
  <div class="nodeValue">Node 4</div>
</div>

补充说明 #

• 如果每行节点数量不固定（比如响应式布局），可以通过JavaScript监听容器宽度变化，计算每行节点数后给换行节点添加特定类名，再通过CSS类控制垂直连线显示。
• 若需要更精准的布局控制，也可以改用CSS Grid布局，通过grid-template-columns固定每行节点数，配合伪元素实现连线逻辑。

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