如何並排排列ul列表？

Question

我要四個清單。 我想並排顯示它們。 第一排醫生和患者並排第二醫葯公司和員工等。在我的代碼中，這不能正常工作。

 .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 

Answer 1

只需添加此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> 

Answer 2

因為，您正在使用引導程序並嘗試使其響應。 正確的方法是使用類行和類col-md來對齊和划分空間。 做出的改變：

• 您需要為2個相鄰項中的每一個分別包含<div class="level row"> ，我們可以在該級別上應用CSS。

• 因為，您使用col-md-6，樹類的一半視圖網格。 每列都將col-md-3作為<li class="dd-item col-md-3"> 。

• 即使在那之后，如果你仍然希望在小視口上保持並排顯示，只需將display:flex添加到level class。

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

Answer 3

您可以將以下代碼添加到CSS：

#tree {
  display: flex;
  flex-wrap: wrap;
}
#tree > li {
  flex-basis: 50%;
  box-sizing: border-box;
}

flexbox將強制li排成一排。 我們將使所有li的寬度為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>