使自定义组织结构图响应。 CSS，HTML，Bootstrap
（帖子底部提供了HTML和CSS代码）
我正在使用Bootstrap 3.0.2创建一个Web应用程序，它帮助我使大部分响应。
我想添加一个组织结构图，以显示元素的层次结构，因此我发现一些代码使用无序列表来显示它。我的问题虽然是一个初学程序员，但是要使组织结构图符合我的目标，即在大多数屏幕尺寸上使网站看起来很好。
从下图中可以看出，问题是当第二级的列表项过多时（第3级），它变得太宽并将其兄弟姐妹推到下一行。 这样，边框（使用伪元素:: before和:: after制作）将无法正确显示。
我怀疑解决方案可能涉及在屏幕尺寸过小时重新调整第3级中每个元素（-tag）的大小。问题是我不知道只针对第3级-tags，因为我希望顶级元素保持相同的大小。也只是想要我可以尝试的方法的一般提示/建议。我愿意改变所有这一切，或者使用任何现有的响应式组织结构图免费用于商业用途。也许甚至有一个我可以合并的解决方案 som bootstrap元素进入组织结构图以满足我的要求？
欣赏任何时间和精力。即使只是向正确的方向推动我的一些提示也会有很多帮助！
HTML CODE：
<!--
ORG CHART
=========================================-->
<div class="container-fluid" style="margin-top:20px">
<div class="row">
<div class="col-md-12">
<div class="tree">
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Top level
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
15 Failed Tests
</div>
</div>
</a>
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Customer
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
3 Failed Tests
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Payments
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
5 Failed Tests
</div>
</div>
</a>
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Send Money
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
3 Failed Tests
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Send Request
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
2 Failed Tests
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Online
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-inv fa-2x"></i>
</div>
<div class="row">
7 Failed Tests
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS样式：
/*#region Organizational Chart*/
.tree * {
margin: 0; padding: 0;
}
.tree ul {
padding-top: 20px; 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: 20px 5px 0 5px;
-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: 2px solid #696969;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 2px solid #696969;
}
/*We need to 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*/
.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: 2px solid #696969;
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: 2px solid #696969;
width: 0; height: 20px;
}
.tree li a{
height: 100px;
width: 200px;
padding: 5px 10px;
text-decoration: none;
background-color: white;
color: #8b8b8b;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #cbcbcb; color: #000;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
/*#endregion*/
2 个答案:
答案 0 :(得分：5)
<div class="content">
<h1>Responsive Organization Chart</h1>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a href="#"><span>Director</span></a>
<ul class="subdirector">
<li><a href="#"><span>Assistante Director</span></a></li>
</ul>
<ul class="departments cf">
<li><a href="#"><span>Administration</span></a></li>
<li class="department dep-a">
<a href="#"><span>Department A</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section A1</span></a></li>
<li class="section"><a href="#"><span>Section A2</span></a></li>
<li class="section"><a href="#"><span>Section A3</span></a></li>
<li class="section"><a href="#"><span>Section A4</span></a></li>
<li class="section"><a href="#"><span>Section A5</span></a></li>
</ul>
</li>
<li class="department dep-b">
<a href="#"><span>Department B</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section B1</span></a></li>
<li class="section"><a href="#"><span>Section B2</span></a></li>
<li class="section"><a href="#"><span>Section B3</span></a></li>
<li class="section"><a href="#"><span>Section B4</span></a></li>
</ul>
</li>`enter code here`
<li class="department dep-c">
<a href="#"><span>Department C</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section C1</span></a></li>
<li class="section"><a href="#"><span>Section C2</span></a></li>
<li class="section"><a href="#"><span>Section C3</span></a></li>
<li class="section"><a href="#"><span>Section C4</span></a></li>
</ul>
</li>
<li class="department dep-d">
<a href="#"><span>Department D</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section D1</span></a></li>
<li class="section"><a href="#"><span>Section D2</span></a></li>
<li class="section"><a href="#"><span>Section D3</span></a></li>
<li class="section"><a href="#"><span>Section D4</span></a></li>
<li class="section"><a href="#"><span>Section D5</span></a></li>
<li class="section"><a href="#"><span>Section D6</span></a></li>
</ul>
</li>
<li class="department dep-e">
<a href="#"><span>Department E</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section E1</span></a></li>
<li class="section"><a href="#"><span>Section E2</span></a></li>
<li class="section"><a href="#"><span>Section E3</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</figure>
</div>
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* Generic styling */
body{
background: #F5EEC9;
}
.content{
width: 100%;
max-width: 1142px;
margin: 0 auto;
padding: 0 20px;
}
a:focus{
outline: 2px dashed #f7f7f7;
}
@media all and (max-width: 767px){
.content{
padding: 0 20px;
}
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul a{
display: block;
background: #ccc;
border: 4px solid #fff;
text-align: center;
overflow: hidden;
font-size: .7em;
text-decoration: none;
font-weight: bold;
color: #333;
height: 70px;
margin-bottom: -26px;
box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
-webkit-transition: all linear .1s;
-moz-transition: all linear .1s;
transition: all linear .1s;
}
@media all and (max-width: 767px){
ul a{
font-size: 1em;
}
}
ul a span{
top: 50%;
margin-top: -0.7em;
display: block;
}
/*
*/
.administration > li > a{
margin-bottom: 25px;
}
.director > li > a{
width: 50%;
margin: 0 auto 0px auto;
}
.subdirector:after{
content: "";
display: block;
width: 0;
height: 130px;
background: red;
border-left: 4px solid #fff;
left: 45.45%;
position: relative;
}
.subdirector,
.departments{
position: absolute;
width: 100%;
}
.subdirector > li:first-child,
.departments > li:first-child{
width: 18.59894921190893%;
height: 64px;
margin: 0 auto 92px auto;
padding-top: 25px;
border-bottom: 4px solid white;
z-index: 1;
}
.subdirector > li:first-child{
float: right;
right: 27.2%;
border-left: 4px solid white;
}
.departments > li:first-child{
float: left;
left: 27.2%;
border-right: 4px solid white;
}
.subdirector > li:first-child a,
.departments > li:first-child a{
width: 100%;
}
.subdirector > li:first-child a{
left: 25px;
}
@media all and (max-width: 767px){
.subdirector > li:first-child,
.departments > li:first-child{
width: 40%;
}
.subdirector > li:first-child{
right: 10%;
margin-right: 2px;
}
.subdirector:after{
left: 49.8%;
}
.departments > li:first-child{
left: 10%;
margin-left: 2px;
}
}
.departments > li:first-child a{
right: 25px;
}
.department:first-child,
.departments li:nth-child(2){
margin-left: 0;
clear: left;
}
.departments:after{
content: "";
display: block;
position: absolute;
width: 81.1%;
height: 22px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
border-left: 4px solid #fff;
margin: 0 auto;
top: 130px;
left: 9.1%
}
@media all and (max-width: 767px){
.departments:after{
border-right: none;
left: 0;
width: 49.8%;
}
}
@media all and (min-width: 768px){
.department:first-child:before,
.department:last-child:before{
border:none;
}
}
.department:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 22px;
border-left: 4px solid white;
z-index: 1;
top: -22px;
left: 50%;
margin-left: -4px;
}
.department{
border-left: 4px solid #fff;
width: 18.59894921190893%;
float: left;
margin-left: 1.751313485113835%;
margin-bottom: 60px;
}
.lt-ie8 .department{
width: 18.25%;
}
@media all and (max-width: 767px){
.department{
float: none;
width: 100%;
margin-left: 0;
}
.department:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 60px;
border-left: 4px solid white;
z-index: 1;
top: -60px;
left: 0%;
margin-left: -4px;
}
.department:nth-child(2):before{
display: none;
}
}
.department > a{
margin: 0 0 -26px -4px;
z-index: 1;
}
.department > a:hover{
height: 80px;
}
.department > ul{
margin-top: 0px;
margin-bottom: 0px;
}
.department li{
padding-left: 25px;
border-bottom: 4px solid #fff;
height: 80px;
}
.department li a{
background: #fff;
top: 48px;
position: absolute;
z-index: 1;
width: 90%;
height: 60px;
vertical-align: middle;
right: -1px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important;
background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 );
}
.department li a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 80px;
width: 95%;
top: 39px;
background-image: none!important;
}
/* Department/ section colors */
.department.dep-a a{ background: #FFD600; }
.department.dep-b a{ background: #AAD4E7; }
.department.dep-c a{ background: #FDB0FD; }
.department.dep-d a{ background: #A3A2A2; }
.department.dep-e a{ background: #f0f0f0; }
</style>
答案 1 :(得分：1)
定位第3 +级项目的宽度：
.tree li li li a {
width: auto;
}
另外， 仅定位第一级锚：
.tree > ul > li > a {
width: auto;
}
仅定位第二级锚：
.tree > ul > li > ul > li > a {
width: auto;
}
等
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？