Html CSS不适用于组织结构图（由ul和li构成）

我正在使用html和css创建一个组织结构图，但图表右侧的格式不正确。销售、生产1、生产2应列在联合主管之下，但应列在左侧列表的下方。和右侧接头也未正确连接

我的图表应该是这样的

                        Director
                             |
    (1)Joint Director(Account)               (2)Joint Director
                |                                 |
(1)Accountant1    (2)Accountant2     (1)Sales  (2)Production1 (3)Production3
                                          |
                                (1)Sales1  (2)Sales2  (3)Sales3

但它看起来是这样的：

HTML

<div class="tree">
    <ul>
        <li><a href="#">Director</a>
            <ul>
                <li><a href="#">Joint Director(Account)</a>
                    <ul>
                        <li><a href="#">Accountant 1</a></li>
                        <li><a href="#">Accountant 2</a></li>
                    </ul>

                </li>
                <li><a href="#">Joint Director</a></li>
                    <ul>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Sales1</a></li>
                                <li><a href="#">Sales2</a></li>
                                <li><a href="#">Sales3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Production1</a></li>
                        <li><a href="#">Production2</a></li>
                    </ul>
            </ul>

        </li>
    </ul>
    </div>

---

你不能有另一个ul作为ul的孩子。正确的结构是必要的

<ul>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

在您的代码中，li标记的结尾未放置正确的结构。使用下面的代码对我来说很好

<div class="tree">
    <ul>
        <li><a href="#">Director</a>
            <ul>
                <li><a href="#">Joint Director(Account)</a>
                    <ul>
                        <li><a href="#">Accountant 1</a></li>
                        <li><a href="#">Accountant 2</a></li>
                    </ul>

                </li>
                <li><a href="#">Joint Director</a>
                    <ul>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Sales1</a></li>
                                <li><a href="#">Sales2</a></li>
                                <li><a href="#">Sales3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Production1</a></li>
                        <li><a href="#">Production2</a></li>
                    </ul>
                  </li>
            </ul>

        </li>
    </ul>
    </div>

哦，这是一个愚蠢的错误。我关闭了联合董事李，所以这是一个问题，但一个小问题，我想在中心的主要节点。看到它稍微向右移动。主节点已经位于总父宽度的中心，但从视图上看，它看起来有点右，因为您的联合控制器块右侧也有销售内容。由于每个li:：before标记使用50%的宽度，使其显示为未对齐。你可以通过使主节点独立于位置：绝对，并给父ul相对位置和中心对齐来解决这个问题。在HTML中向主节点添加一个类，并在文件中添加CSS行。mainNode{position:absolute；left:39%；bottom:100%；}.mainNode:：在{content:''之后；position:absolute；top:23px；left:50%；border left:1px solid#ccc；width:0；height:20px；}.mainNode+ul:：在{display:none；}之前.tree类添加以下css使其居中。tree{宽度：100%；高度：自动；显示：flex；对齐内容：中心；}

 ...
 <li><a href="#">Joint Director</a> <!-- remove </li> here -->
     <ul>
         <li><a href="#">Sales</a> <!-- good here -->
             <ul>
                 <li><a href="#">Sales1</a></li>
                 <li><a href="#">Sales2</a></li>
                 <li><a href="#">Sales3</a></li>
             </ul>
          </li>
          <li><a href="#">Production1</a></li>
          <li><a href="#">Production2</a></li>
     </ul>
   </li> <!-- add </li> here -->
   ...

<div class="tree">
    <ul>
        <li><a href="#">Director</a>
            <ul>
                <li><a href="#">Joint Director(Account)</a>
                    <ul>
                        <li><a href="#">Accountant 1</a></li>
                        <li><a href="#">Accountant 2</a></li>
                    </ul>

                </li>
                <li><a href="#">Joint Director</a>
                    <ul>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Sales1</a></li>
                                <li><a href="#">Sales2</a></li>
                                <li><a href="#">Sales3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Production1</a></li>
                        <li><a href="#">Production2</a></li>
                    </ul>
                  </li>
            </ul>

        </li>
    </ul>
    </div>