我要四个清单。我想并排显示它们。第一排医生和患者并排第二医药公司和员工等。在我的代码中,这不能正常工作。
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
/*Remove connectors before root*/
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*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: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" /><input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" /><input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" /><input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" /><input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" /><input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" /><input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
像这样:
1. Doctor patient 2. Pharma Company Employee
只需添加此css规则:
.tree > ul > li {
display: inline-block;
background-color: #666;
margin: 0 20px 20px 0;
padding-bottom: 20px;
}
.tree > ul > li:nth-child(odd) {
float: left;
}
.tree > ul > li a {
color: #fff;
}
.tree >ul > li:nth-child(odd) {
float: left;
}
.tree >ul > li {
display: inline-block;
background-color: #666;
margin: 0 20px 20px 0;
padding-bottom: 20px;
}
.tree >ul > li a {
color: #fff;
}
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*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: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
/*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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before, *:after {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
因为,您正在使用引导程序并尝试使其响应。正确的方法是使用类行和类col-md来对齐和划分空间。做出的改变:
<div class="level row">
中的每个相邻项目分别包含,我们可以在该级别上应用CSS。<li class="dd-item col-md-3">
。display:flex
添加到关卡类。.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
/*Remove connectors before root*/
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before {
height: 30px;
}
/*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: #dd4814;
color: #ffffff;
border: 1px solid white;
}
/*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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
.level {
display: flex;
}
.level>li {
margin: 10px;
width: 250px;
background: gray;
padding-bottom:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<div class="level row">
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" /><input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" /><input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
<div class="level row">
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" /><input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" /><input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
<div class="level row">
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" /><input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item col-md-3">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" /><input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
您可以将以下代码添加到CSS:
#tree {
display: flex;
flex-wrap: wrap;
}
#tree > li {
flex-basis: 50%;
box-sizing: border-box;
}
flexbox将迫使li
s排成一排。我们将使所有li
s的宽度为50%,并允许它们使用flex-wrap: wrap;
下降到新的一行。
.tree li {
margin: 0px 0;
list-style-type: none;
position: relative;
padding: 20px 5px 0px 5px;
}
.tree li::before {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
right: auto;
left: -20px;
border-left: 1px solid #ccc;
bottom: 50px;
}
.tree li::after {
content: '';
position: absolute;
top: 30px;
width: 35px;
height: 20px;
right: auto;
left: -20px;
border-top: 1px solid #ccc;
}
.tree li a {
display: inline-block;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-left: 9px;
}
.tree li a label {
margin-left: 20px;
margin-top: -20px;
}
.tree>ul>li::before,
.tree>ul>li::after {
border: 0;
}
.tree li:last-child::before {
height: 30px;
}
.tree li a:hover,
.tree li a:hover+ul li a {
background: #dd4814;
color: #ffffff;
border: 1px solid #dd4814;
}
.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: #dd4814;
}
.tree-checkbox {
margin: 4px !important;
}
.tree:before {
border-left: 1px solid #ccc;
bottom: 16px;
content: "";
display: block;
left: 0;
position: absolute;
top: -21px;
width: 1px;
z-index: 1;
}
.tree ul:after {
border-top: 1px solid #ccc;
content: "";
height: 20px;
left: -29px;
position: absolute;
right: auto;
top: 30px;
width: 42px;
}
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.tree {
overflow: auto;
padding-left: 0px;
position: relative;
}
#tree {
display: flex;
flex-wrap: wrap;
background-color: #c0becc;
}
#tree>li {
flex-basis: 50%;
box-sizing: border-box;
}
#tree>li:nth-child(1),
#tree>li:nth-child(2) {
background: #e0e0e0;
}
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
<ul id="tree" class="dd-list">
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[0].IsChecked" type="hidden" value="false" />
<label for="1">Doctor</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="2" name="DomainViews[1].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[1].IsChecked" type="hidden" value="false" />
<label for="2">Patient</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="3" name="DomainViews[2].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[2].IsChecked" type="hidden" value="false" />
<label for="3">Pharma Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="4" name="DomainViews[3].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[3].IsChecked" type="hidden" value="false" />
<label for="4">Employee</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="5" name="DomainViews[4].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[4].IsChecked" type="hidden" value="false" />
<label for="5">Hospital</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dd-item">
<a href="#">
<input data-val="true" data-val-required="The IsChecked field is required." id="6" name="DomainViews[5].IsChecked" type="checkbox" value="true" />
<input name="DomainViews[5].IsChecked" type="hidden" value="false" />
<label for="6">Insurance Company</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="2">
<label for="2"> Level 2 - 1</label>
</a>
<ul class="dd-list">
<li class="dd-item">
<a href="#">
<input type="checkbox" id="3">
<label for="3"> Level 3 - 1</label>
</a>
</li>
<li class="dd-item">
<a href="#">
<input type="checkbox" id="4">
<label for="4"> Level 3 - 2</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>