Question

我正在尝试在HTML中创建类似树的结构。我不是一个专业的HTML程序员，我想知道如何在HTML中执行以下类型的树结构

             4
    2                  6

1          3       5          7

我的问题是给出一些字符串/数字我如何根据字符串的数量在网页中相对定位它们。例如，在第一行中，我只有一个数字，所以它应该转到中间。在第二行中，我有两个数字，因此将页面分成三个部分并将它们放在分界线上。请不要建议任何第三方库等。我需要一个纯HTML / JS代码来执行此操作。感谢

Answer 1

如果你的意思是下拉树，这是一个好主意：

<details>
  <summary>1</summary>
  1
  <details>
    <summary>2</summary>
    2
    </details>
    <details>
      <summary>3
      </summary>
      3
  </details>

Answer 2

用表格来做这件事：

<table>
    <tr>
        <th colspan="4">4</th>
    </tr>
    <tr>
        <th colspan="2">2</th>
        <th colspan="2">6</th>
    </tr>
    <tr>
        <th>1</th>
        <th>3</th>
        <th>5</th>
        <th>7</th>
    </tr>
</table>

在html / css / javascript中创建一个类似树的结构

2 个答案: