在HTML和CSS中相交的水平线和垂直线

我已经开始使用HTML和CSS创建组织结构图。我遇到的一个问题是在

和

元素之间创建一条相交的图表流程线

我创建了容器、垂直线和水平线定义，并将其包装到

和
标记中。通过在
中倾斜直线，垂直线可以正常工作。我创建了一个第二个< /代码>，用于水平线在中间与垂直线相交。然而，这条线仍然在底部

我已经在我的帖子中添加了CSS和HTML，希望你们中的一位能够帮助我找出我做错的地方


表格{
边界塌陷：塌陷；
左边距：自动；
右边距：自动；
宽度：自动；
}
tr{
边界：无；
}
th，
运输署{
边界塌陷：塌陷；
边框：1px纯黑；
填充顶部：0；
填充底部：0；
文本对齐：居中；
宽度：100；
}
分区集装箱{
宽度：40px；
}
垂直线{
左边框：1px纯红；
高度：55px；
左边距：自动；
右边距：自动；
宽度：1px；
}
等分水平线{
边框底部：1px纯红；
高度：1px；
页边顶部：自动；
页边距底部：自动；
宽度：40px；
}

部


EmpName
部


EmpName
部


EmpName
部


EmpName
这里有一个解决方法：

在垂直线之前添加另一条水平线：

<td style="width: 15%">
  <div class="container">
    <div class="horizontal-line">&nbsp;</div>
    <div class="vertical-line">&nbsp;</div>
    <div class="horizontal-line">&nbsp;</div>
  </div>
</td>

请注意，您的

应该是

或

试试底部的
边距：-40px自动40px
line@j08691规范说明了

@Rob我的观点是

在任何规范中都是不正确的。请参阅@j08691我完全理解，但建议

不正确帮任何人的忙，你的链接也会说和我一样的话。
div.container {
    display: flex;
    width: 40px;
}