我要四个清单.我想并排显示它们.第一排医生和患者并排第二医药公司和员工等.在我的代码中,这不能正常工作.
.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>
像这样:
06002
解决方法
只需添加此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; } .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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。