html - 如何并排对齐 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>