css - 使用html和css的组织结构图

Question

在此组织结构图中，列表元素之间的间距变得太大（例如，在 name3 和 name5 之间、在 name5 和 name12 之间、在 name6 和 name11 之间）。我们如何减少它们之间的空间，以便可以在一页中查看而不需要水平滚动。请帮忙

我附上了我试过的代码

* {
  margin: 0;
  padding: 0;
}

.img-quadrata {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.text-center {
  margin-top: 10px;
  font-size: 1.2em;
}

small {
  text-align: center;
  font-size: 0.8em;
  text-decoration: none;
  color: gray;
}

.tree {
  text-align: center;
  padding-left: 10px;
}

.tree ul {
  display: block;
  white-space: nowrap;
  padding-top: 15px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  vertical-align: top;
  display: inline-block;
  white-space: normal;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 0px 0px 60px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 60%;
  height: 15px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}


/*Remove left-right connectors from elements without any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and right connector from last child*/

ul.first li.first::before,
ul.first li.first::after {
  border: 0 none;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 15px;
}

<div class="tree">
  <ul class="first">
    <li class="first techops">

      <div class="col-md-4">
        <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
        <h3 class="text-center">Name1
          <br/>
          <small> Designation</small></h3>

      </div>
      <ul>
        <li class="first techops">

          <div class="col-md-4">
            <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
            <h3 class="text-center">Name2
              <br/>
              <small> Designation</small></h3>

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

      <ul>
        <li>
          <div class="col-md-4">
            <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
            <h3 class="text-center">Name3
              <br/>
              <small> Designation</small></h3>

          </div>
        </li>

        <li>
          <div class="col-md-4">
            <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
            <h3 class="text-center">Name5
              <br/>
              <small> Designation</small></h3>

          </div>
          <ul>
            <li>
              <div class="col-md-4">
                <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                <h3 class="text-center">Name6
                  <br/>
                  <small> Designation</small></h3>

              </div>
              <ul>
                <li>
                  <div class="col-md-4">
                    <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                    <h3 class="text-center">Name7
                      <br/>
                      <small> Designation</small></h3>

                  </div>
                </li>
                <li>
                  <div class="col-md-4">
                    <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                    <h3 class="text-center">Name8
                      <br/>
                      <small> Designation</small></h3>

                  </div>
                </li>
                <li>
                  <div class="col-md-4">
                    <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                    <h3 class="text-center">Name9
                      <br/>
                      <small> Designation</small></h3>

                  </div>
                </li>
                <li>
                  <div class="col-md-4">
                    <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                    <h3 class="text-center">Name10
                      <br/>
                      <small> Designation</small></h3>

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

            <li>
              <div class="col-md-4">
                <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
                <h3 class="text-center">Name11
                  <br/>
                  <small> Designation</small></h3>

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

          <li>
            <div class="col-md-4">
              <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
              <h3 class="text-center">Name12
                <br/>
                <small> Designation</small></h3>

            </div>
          </li>

          <li>
            <div class="col-md-4">
              <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
              <h3 class="text-center">Name13
                <br/>
                <small> Designation</small></h3>

            </div>
          </li>

          <li>
            <div class="col-md-4">
              <img src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" class="img-quadrata center-block">
              <h3 class="text-center">Name14
                <br/>
                <small> Designation</small></h3>

            </div>

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

标签： css