CSS组织结构图

Question

我在网上找到了一个基本的组织结构图，我自己修改了一些包含头像泡泡的图表。我有两个问题我现在无法解决。任何帮助都将非常感激。

这是我的代码

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

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

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

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 15px 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: 50%;
  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;
}

.tree li .box {
  border: 1px solid #ccc;
  padding: 5px 10px 5px 0px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}


/*Hover effects*/

.tree li .box:hover,
.tree li .box:hover+ul li .box {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li .box:hover+ul li::after,
.tree li .box:hover+ul li::before,
.tree li .box:hover+ul::before,
.tree li .box:hover+ul ul::before,
.avatar {
  border-color: #94a0b4;
}


/*Avatar bubbles*/

.avatar {
  position: relative;
  top: 0px;
  left: -35px;
  width: 75px;
  height: 75px;
  margin-right: -30px;
  background-size: cover;
  background-color: #fff;
  background-image: url("temp.jpg");
  float: left;
  border: .5px solid #94a0b4;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

＆＃13;

<div class="tree">
  <ul class="first">
    <li class="first techops"><span class="box"><div class="avatar"></div>Department Area Name<br><strong>Director</strong><br><br>John Smith</span>
      <ul>
        <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span>
              <ul>
                <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li>
              </ul>
            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span>

            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span>
              <li><span class="box"><div class="avatar"></div>Team Leader</span></li>
            </li>
          </ul>
        </li>
        <li><span class="box"><div class="avatar"></div>Manager 2</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Name 3</span></li>
            <li><span class="box"><div class="avatar"></div>Name 4</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

第一个问题是线条分解为不适合页面，所以看起来很奇怪，你可以在这里看到＆＃34;经理2＆＃34;应该与＆＃34;经理Jane Smith＆＃34;但它正在崩溃

理想情况下，我宁愿让它根据需要扩展右侧窗格。如果一行中有20-30个孩子，那么溢出应该能够根据需要向右滚动。我一直遇到的问题是位置：相对（我认为），否则它不会正常排列。

我似乎无法弄清楚的第二个问题是如何在<br/>之后使文字停止自动换行。该示例位于＆＃34;下一个标题，下一个名称＆＃34;一。正如你所看到的那样，它会删除＆＃34; Name＆＃34;紧接着＆＃34;下一步＆＃34;。理想情况下，我希望它能在一条线上。我很确定<br/>引起它的是<br/>。如果你看第一个，那么＆＃34;部门区域名称＆＃34;在 var chart = new Highcharts.Chart({ tooltip: { dateTimeLabelFormats: { day:"%A, %b %e, %Y, %H:%M" }, formatter: function() { var tt = '', newDate = new Date(this.key).toLocaleString(); tt = '<b>' + newDate + ':</b> <br/>' + '<b>' + this.series.name + '</b>' + ': ' + this.y; return tt; } }, xAxis: { type: 'datetime' } }); 之前，它没有在那里做。

再次感谢您提前获得的任何见解。

Answer 1

如果您不使用浮点数而是将li更改为display:inline-block;，则可以通过将li添加到white-space:nowrap来确保ul不换行white-space:normal。

然后您需要将li添加到vertical-align:top，以便内部文本可以换行，然后将* { margin: 0; padding: 0; } .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: 15px 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: 50%; 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; } .tree li .box { border: 1px solid #ccc; padding: 5px 10px 5px 0px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 12px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } /*Hover effects*/ .tree li .box:hover, .tree li .box:hover+ul li .box { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li .box:hover+ul li::after, .tree li .box:hover+ul li::before, .tree li .box:hover+ul::before, .tree li .box:hover+ul ul::before, .avatar { border-color: #94a0b4; } /*Avatar bubbles*/ .avatar { position: relative; top: 0px; left: -35px; width: 75px; height: 75px; margin-right: -30px; background-size: cover; background-color: #fff; background-image: url("temp.jpg"); float: left; border: .5px solid #94a0b4; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }添加到其中，这样如果一棵树有更多子项，那么它们将正确对齐彼此相邻：

<div class="tree">
  <ul class="first">
    <li class="first techops">
      <span class="box">
        <div class="avatar"></div>
        Department Area Name<br>
        <strong>Director</strong><br><br>John Smith
        </span>
      <ul>
        <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span>
              <ul>
                <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li>
              </ul>
            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span></li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span></li>
            <li><span class="box"><div class="avatar"></div>Team Leader</span></li>
          </ul>
        </li>

        <li><span class="box"><div class="avatar"></div>Manager 2</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Name 3</span></li>
            <li><span class="box"><div class="avatar"></div>Name 4</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

face_img