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

【问题标题】：Intersecting horizontal and vertical lines in HTML and CSSHTML 和 CSS 中的水平线和垂直线相交
【发布时间】：2018-08-03 07:52:55
【问题描述】：

我已经开始使用 HTML 和 CSS 创建 OrgChart。我遇到的一个问题是在<tr> 和<td> 元素之间创建一个相交的图表流线。

我创建了容器、垂直线和水平线定义，我将它们包装到 <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` 中，以便水平线在中间与垂直线相交。但是，这条线仍然在底部。

我已将 CSS 和 HTML 添加到我的帖子中，希望你们中的一个可以帮助我解决我做错了什么。

table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

tr {
  border: none;
}

th,
td {
  border-collapse: collapse;
  border: 1px solid black;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  width: 100;
}

div.container {
  width: 40px;
}

div.vertical-line {
  border-left: 1px solid red;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

div.horizontal-line {
  border-bottom: 1px solid red;
  height: 1px;
  margin-top: auto;
  margin-bottom: auto;
  width: 40px;
}

<table>
  <tr>
    <td style="background-color: goldenrod" colspan="3">
      <div>Dept
        </br>
        <b>EmpName</b>
      </div>
    </td>
  </tr>

  <tr>
    <td style="width: 42.5%; background-color: wheat">
      <div>Dept
        </br>
        <b>EmpName</b>
      </div>
    </td>

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

    <td style="width: 42.5%">
      <div style="background-color:#CCFFCC">Dept
        </br>
        <b>EmpName</b>
        <div style="border-bottom: 1px solid">
        </div>
        <div style="background-color:#CCFFFF">Dept
          </br>
          <b>EmpName</b>
        </div>
    </td>
  </tr>
</table>

【问题讨论】：

请注意，您的 应该是  或 
在底线试试margin:-40px auto 40px
@j08691 规范声明 
@Rob 我的意思是 在任何规范中都不正确。见stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br
@j08691 我完全理解，但建议   并没有给任何人带来任何好处，而且您的链接与我所做的相同。

标签： html css

【解决方案1】：

这里有一个解决方法：
在垂直线之前添加另一条水平线：

<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>

然后将其容器的显示改为flex：

div.container {
    display: flex;
    width: 40px;
}

【讨论】：