如何并排排列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">中的每个相邻项目分别包含<li class="dd-item col-md-3">，我们可以在该级别上应用CSS。

• 因为，您使用col-md-6，树类的视图网格的一半。每列都将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>

vector<vector<sf::Sprite>> init_board_graphics(int size) {

    sf::Texture _t1;
    sf::Texture _t2;
    _t1.loadFromFile("images/whitefield.png");
    _t2.loadFromFile("images/blackfield.png");

    vector<vector<sf::Sprite>> board;
    //init vector for insert row-values
    vector<sf::Sprite> help_vector;


    for (int i = 0; i < size; i++) {
        help_vector.clear();
        for (int j = 0; j < size; j++) {

            sf::Sprite insert_element;

            if ((i + j) % 2 == 0) {
                insert_element = sf::Sprite(_t1);
            }
            else {
                insert_element = sf::Sprite(_t2);
            }


            insert_element.setPosition(i * pixel_field, j * pixel_field);
            help_vector.push_back(insert_element);


        }
        board.push_back(help_vector);
    }

    return board;



}

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;转到新行。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;