tree二级和三级同一行结构横向

在网页设计或应用开发中，我们经常需要展示具有层级关系的数据结构，例如组织架构、分类列表等。对于树形结构（Tree），二级和三级在同一行显示通常是指在用户界面上，父节点和其直接子节点在水平方向上排列，形成一个连续的、横向展开的层级视图。

这种布局通常可以通过CSS样式来实现，配合HTML的嵌套列表结构，如下所示：

<ul class="tree">
  <li>一级节点
    <ul class="children">
      <li>二级节点
        <ul class="grandchildren">
          <li>三级节点</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

对于这样的布局，CSS样式可以设置如下：

.tree {
  list-style-type: none; /* 去掉默认的列表样式 */
}

.tree > li {
  display: inline-block; /* 设置为内联块元素，使列表项横向排列 */
  margin-right: 20px; /* 设置列表项之间的间距 */
}

.children, .grandchildren {
  list-style-type: none;
  padding-left: 20px; /* 增加子列表的左侧内边距 */
}

上述示例中，外层列表的 `<li>` 标签代表树的一级节点，二级节点列表 `<ul class="children">` 和三级节点列表 `<ul class="grandchildren">` 通过内嵌在一级节点的 `<li>` 标签内，使得树的二级和三级节点能够与一级节点处于同一行。