如何用线条连接多个div元素？附现有代码示例

我想要实现如下图所示的Div元素间线条连接效果，目前已经创建并自定义了若干Div元素，以下是我的当前代码：

当前代码 #

CSS 代码 #

.plan-tor {
  height: 0px;
  width: 97%;
  background-color: black;
  border: 20px solid white;
  padding: 4px 4px;
}

.plan-peron {
  border: 3px double black;
  width: 50%;
  text-align: center;
  font-size: 10px;
  margin: auto;
}

.noline-bottom {
  border-bottom-style: none;
}

.noline-top {
  border-top-style: none;
}

#parent2 {
  display: flex;
}

#P51 {
  width: 40%;
  margin-left: 25%;
}

#P52 {
  width: 40%;
  margin-left: 25%;
  flex: 1;
}

#P61 {
  width: 20%;
  float: right;
  margin-right: 5%;
}

#P62 {
  width: 20%;
  margin-top: 14px;
  float: right;
  margin-right: 5%;
}

#T51 {
  width: 67%;
}

#T52 {
  width: 47%;
  margin-left: 20%;
  flex: 1;
}

#T61 {
  width: 25%;
  float: right;
}

HTML 代码 #

<div class="plan-tor" id="T62"></div>
<div class="parent2">
  <div class="plan-peron noline-bottom" id="P62">Peron 6-2</div>
  <div class="plan-tor" id="T52"></div>
</div>
<div class="parent2">
  <div class="plan-peron noline-top" id="P61">Peron 6-1</div>
  <div style="color: white;"> ' </div>
  <div class="plan-tor" id="T61"></div>
  <div class="plan-peron noline-bottom" id="P52">Peron 5-2</div>
</div>
<div class="plan-peron noline-top" id="P51">Peron 5-1</div>
<div class="plan-tor" id="T51"></div>
<div class="plan-tor" id="T42"></div>
<div class="plan-peron noline-bottom" id="P42">Peron 4-2</div>
<div class="plan-peron noline-top" id="P41">Peron 4-1</div>
<div class="plan-tor" id="T41"></div>

解决方案 #

当前代码混用浮动和flex布局，容易导致元素对齐混乱、线条连接错位，可通过以下调整实现目标效果：

1. 统一布局逻辑：放弃浮动，全用flex布局控制元素位置，避免布局冲突；同时修正CSS中#parent2的选择器错误（HTML里是类名，不是ID）。
2. 简化线条样式：去掉.plan-tor中多余的border和padding，直接用height控制线条粗细，避免挤压线条显示空间。
3. 优化元素对齐：给.parent2添加align-items: center属性，让内部元素垂直居中，消除线条和Div的错位问题。
4. 清理冗余元素：移除HTML里的占位空元素，用flex的gap属性控制元素间距。

优化后CSS代码 #

.plan-tor {
  height: 3px; /* 直接控制线条粗细 */
  background-color: black;
  margin: 0;
}

.plan-peron {
  border: 3px double black;
  width: fit-content; /* 自适应内容宽度 */
  padding: 4px 12px;
  text-align: center;
  font-size: 10px;
}

.noline-bottom {
  border-bottom-style: none;
}

.noline-top {
  border-top-style: none;
}

.parent2 {
  display: flex;
  align-items: center;
  gap: 10px; /* 控制元素间间距 */
  margin: 4px 0;
}

#P51 {
  width: fit-content;
  margin-left: 25%;
}

#P52 {
  width: fit-content;
}

#P61, #P62 {
  width: fit-content;
  margin-right: 5%;
}

#T51 {
  width: 67%;
  margin-left: 25%;
}

#T52 {
  width: 47%;
}

#T61 {
  width: 25%;
}

#T62 {
  width: 25%;
  margin-left: auto;
  margin-right: 5%;
}

优化后HTML代码 #

<div class="plan-tor" id="T62"></div>
<div class="parent2">
  <div class="plan-peron noline-bottom" id="P62">Peron 6-2</div>
  <div class="plan-tor" id="T52"></div>
</div>
<div class="parent2">
  <div class="plan-peron noline-top" id="P61">Peron 6-1</div>
  <div class="plan-tor" id="T61"></div>
  <div class="plan-peron noline-bottom" id="P52">Peron 5-2</div>
</div>
<div class="plan-peron noline-top" id="P51">Peron 5-1</div>
<div class="plan-tor" id="T51"></div>
<div class="plan-tor" id="T42"></div>
<div class="plan-peron noline-bottom" id="P42">Peron 4-2</div>
<div class="plan-peron noline-top" id="P41">Peron 4-1</div>
<div class="plan-tor" id="T41"></div>

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