如何在CSS家族树中并肩展示许多div

Question

我想在家谱中以相同程度的每个分支显示一个人。CSS知识不是很好。尽管我使用 float:left或 display: inline-block，树向下出现。我的错误在哪里？

小提琴演示

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  font-family: 'Times New Roman', Arial;
  font: 10px;
}
#container {
  margin: 0 auto;
  width: 100%;
}
.tree {
  width: 100%;
  padding-top: 20px;
  position: relative;
  float: left;
  display: inline-block;
  overflow: hidden;
}
.tree img {
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 80px;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  display: inline-block;
  float: left;
  margin: 0;
}
.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  margin: 0;
}
.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}
.tree li:only-child {
  padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
  border: 0;
}
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
.tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree ul div {
  border: 1px solid #ccc;
  padding: 5px;
  text-decoration: none;
  width: min-content;
  color: #666;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  transition: all 0.5s;
}
@media all and (max-width: 1475px) {
  .tree {
    width: 100%;
    padding-top: 20px;
    position: absolute;
    float: left;
  }
}

<div id="container">
  <ul class="tree">
    <li>
      <div>OFFICES</div>
      <ul>
        <li>
          <ul class="tree">
            <li>
              <div>Center</div>
              <ul>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
</div>

Answer 1

尝试display: flex/inline-flex;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  font-family: 'Times New Roman', Arial;
  font: 10px;
}
#container {
  margin: 0 auto;
  width: 100%;
}
.container .tree {
  width: 100%;
  padding-top: 20px;
  position: relative;
  
}
.container .tree > li {
   text-align: center;
   width: 100%;
}
.tree img {
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 80px;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  display: inline-flex;
  margin: 0;
}
.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  margin: 0;
}
.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}
.tree li:only-child {
  padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
  border: 0;
}
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
.tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree ul div {
  border: 1px solid #ccc;
  padding: 5px;
  text-decoration: none;
  width: min-content;
  color: #666;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  transition: all 0.5s;
}
@media all and (max-width: 1475px) {
  .tree {
    width: 100%;
    padding-top: 20px;
    position: absolute;
    float: left;
  }
}

<div id="container">
  <ul class="tree">
    <li>
      <div>OFFICES</div>
      <ul>
        <li>
          <ul class="tree">
            <li>
              <div>Center</div>
              <ul>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
                        <br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <ul class="tree">
                    <li>
                      <div>
                        <a id="hypPerson" href="">
                          <img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
                        <br>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
</div>