CSS 조직도

Question

온라인으로 기본적인 조직도를 찾았고 아바타 버블을 포함시키기 위해 자신의 일부를 조정했습니다. 나는 지금 당장 알 수없는 두 가지 문제가있다. 어떤 도움을 주시면 감사하겠습니다. 여기

는

* { 
 
    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%; 
 
}

<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>

첫 번째 문제는이 이상한 보이는, 그래서 당신이 볼 수있는 선이, 그들이 페이지에 맞지 않는 경우에 무너 뜨리는 것입니다 내 코드입니다 여기에 "관리자 2"는 "관리자 제인 스미스"와 같은 줄에 있어야하지만

을 깨고이상적으로, 필자는 필요한만큼 오른쪽 창을 확장해야합니다. 한 줄에 20-30 명의 자식이 있으면 오버플로가 필요한만큼 오른쪽으로 스크롤 할 수 있어야합니다. 내가 계속해서 직면하게되는 문제는 위치 다. (나는 생각한다.) 그렇지 않으면 제대로 정렬되지 않을 것이다.

내가 알아낼 수없는 두 번째 문제는 <br/> 이후에 텍스트 줄 바꿈을 중지하는 방법입니다. 이 예는 "다음 제목, 다음 이름"입니다. 보시다시피, "다음"다음에 "이름"이 나타납니다. 이상적으로, 저는 한 줄에 모두 들어가고 싶습니다. 나는 그게 원인이되는 <br/>이라고 확신한다. 첫 번째 것을 보면, "Department Area Name"은 <br/> 앞에 있고 그것은 거기에서하지 않습니다.

다시 한번 알려 주시면 감사하겠습니다.

Answer 1

당신이 lidisplay:inline-block;에 변경하는 대신 수레를 사용하지 않는 경우 다음 li가 ul에 white-space:nowrap을 추가하여 포장하지 않도록 할 수 있습니다. 하나의 나무가 더 아이가있는 경우, 그들은 서로 적절하게 옆에 정렬됩니다 있도록

당신은 그래서 텍스트 내부 포장 할 수 있고 다음에 vertical-align:top을 추가 li에 white-space:normal을 추가해야

* { 
 
    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>