如何并排排列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来对齐和划分空间。做出的改变：

• 您需要为<div class="level row">中的每个相邻项目分别包含，我们可以在该级别上应用CSS。
• 因为，您使用col-md-6，树类的一半视图网格。每个列都将col-md-3作为<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>

Answer 3

您可以将以下代码添加到CSS：

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

flexbox将迫使lis排成一排。我们将使所有lis的宽度为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>