创建一个水平树状图项目

创建一个水平树状图项目可以使用HTML和CSS来实现。以下是一个示例代码：

HTML代码：

<div class="tree">
  <ul>
    <li>
      <span class="caret">Node 1</span>
      <ul class="nested">
        <li>Child 1</li>
        <li>Child 2</li>
        <li>
          <span class="caret">Child 3</span>
          <ul class="nested">
            <li>Grandchild 1</li>
            <li>Grandchild 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Node 2</li>
    <li>
      <span class="caret">Node 3</span>
      <ul class="nested">
        <li>Child 1</li>
        <li>Child 2</li>
      </ul>
    </li>
  </ul>
</div>

CSS代码：

.tree {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.tree ul {
  padding-left: 20px;
  position: relative;
}

.tree li {
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  position: relative;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 1px;
  height: 100%;
  border-left: 1px solid #999;
}

.tree li:last-child::before {
  border-left: none;
}

.tree .caret {
  cursor: pointer;
}

.tree .caret::before {
  content: '+';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

.tree .caret.collapse::before {
  content: '-';
}

.tree .nested {
  display: none;
}

.tree .active {
  display: block;
}

JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var carets = document.getElementsByClassName('caret');
  for (var i = 0; i < carets.length; i++) {
    carets[i].addEventListener('click', function() {
      this.classList.toggle('collapse');
      var nested = this.nextElementSibling;
      if (nested.style.display === 'block') {
        nested.style.display = 'none';
      } else {
        nested.style.display = 'block';
      }
    });
  }
});

在上述代码中，使用了一个ul和li的嵌套结构来表示树的层级关系。每个节点使用一个span元素来表示，并添加了一个caret类来实现展开和折叠的功能。使用CSS来设置节点和线条的样式，并使用JavaScript来控制展开和折叠的行为。

你可以根据需要修改HTML和CSS来适应你的项目需求。