Question

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

我创建了容器，垂直线和水平线定义，并将它们包装到<td> and tags. 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>

Answer 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;
}

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

1 个答案: