如何处理HTML和CSS中横行和垂直线的交叉?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (238)

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

我创建了容器、垂直线和水平线定义,并将它们包装在<td>标签。中的直线,使之正确工作。我创造了第二个使水平线在中间与垂直线相交。然而,这条线仍在底部。

我已经添加了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>

提问于
用户回答回答于

这里有一个解决办法:

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

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

扫码关注云+社区

领取腾讯云代金券