css实现思维导图树状结构
生活随笔
收集整理的這篇文章主要介紹了
css实现思维导图树状结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<div class="tree">
<ul class="treeul">
<li>
<div class="dv">總公司</div>
<ul>
<li>
<div class="dv">軟件開發部</div>
<ul>
<li>
<div class="dv">一期研發</div>
</li>
<li>
<div class="dv">fffff</div>
</li>
<li>
<div class="dv">bbbb</div>
</li>
<li>
<div class="dv">qqqqqq</div>
</li>
</ul>
</li>
<li>
<div class="dv">aaa</div>
</li>
<li>
<div class="dv">bbb</div>
<ul>
<li>
<div class="dv">ccccc</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
.tree {
// overflow-x:auto;
ul,
li {
list-style: none;
}
.dv {
80px;
height: 30px;
// border: 1px solid #ccc;
display: inline-block;
font-size: 16px;
position: relative;
}
ul {
overflow: hidden;
// padding-top: 20px;
position: relative;
}
li {
float: left;
text-align: center;
position: relative;
padding: 20px 5px 0 5px;
font-size: 0;
}
.tree li:only-child {
padding: 0;
}
.tree ul ul::before {
content: '';
position: absolute;
left: 50%;
top: 0;
0;
height: 20px;
border-left: 1px solid #ccc;
}
li::before {
content: '';
position: absolute;
right: 50%;
top: 0;
50%;
height: 20px;
border-top: 1px solid #ccc;
}
li::after {
content: '';
position: absolute;
right: 50%;
top: 0;
50%;
height: 20px;
border-top: 1px solid #ccc;
}
li::after {
left: 50%;
top: 0;
right: 0;
border-left: 1px solid #ccc;
}
li:first-child::after {
border-radius: 5px 0 0 0;
}
.treeul li:first-child::before,
.treeul li:last-child::after {
border: none;
}
.treeul li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0px 5px 0 0;
}
.treeul li:only-child::before {
border: none;
}
}
找不到了
總結
以上是生活随笔為你收集整理的css实现思维导图树状结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是基金净值、单位净值、累计净值
- 下一篇： QModelIndex/Role/Mod