使用HTML和CSS编码创建组织结构图

<div class="org-chart">
  <ul>
    <li>
      <div class="node">CEO</div>
      <ul>
        <li>
          <div class="node">CTO</div>
          <ul>
            <li><div class="node">Software</div></li>
            <li><div class="node">Hardware</div></li>
          </ul>
        </li>
        <li>
          <div class="node">CFO</div>
          <ul>
            <li><div class="node">Accounting</div></li>
            <li><div class="node">Finance</div></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.org-chart {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.node {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  margin-left: 20px;
}

li:before {
  content: "";
  display: block;
  border-top: 1px solid #ccc;
  margin-top: -10px;
  margin-left: -20px;
  width: 20px;
}