我在網上發現了一個基本的組織結構圖,並對自己的部分內容進行了修改,以包含化身泡沫。我現在有兩個問題我無法弄清楚。任何幫助將非常感激。CSS組織結構圖
這裏是我的代碼
* {
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/>
。如果你看第一個,「部門區域名稱」在<br/>
之前,它不在那裏。
再次感謝您提供的任何見解。
謝謝皮特。浮子爲溢出工作。但是如果中場休息前的文字不足以擴大禁區的話,休息後的文字仍然會丟掉下一個字。也許有一個br的語法? – Chester
@徹斯特對不起,不知道你的意思是 - 你想讓箱子內的文字不要包裹?如果是這樣的話,只需用一層nowrap包裝它們並使該類爲'white-space:nowrap' - 例如'名稱4不應該包裝' – Pete
謝謝,我會給下次嘗試我的電腦時嘗試一下。但是,基本上我希望文字不要掉線。我不想要的一個例子是第二行,「經理」名字「簡史密斯」,史密斯部分下降。 – Chester