html – 如何并排排列ul列表？

概述我要四个清单.我想并排显示它们.第一排医生和患者并排第二医药公司和员工等.在我的代码中,这不能正常工作. .tree li { margin: 0px 0; list-style-type: none; position: relative; padding: 20px 5px 0px 5px;}.tree li::before { content: ''; posi 我要四个清单.我想并排显示它们.第一排医生和患者并排第二医药公司和员工等.在我的代码中,这不能正常工作.

.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',@R_403_3726@;  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 >  <div >    <div >      <div  ID="nestable" >        <ul ID="tree" >          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>          <li >            <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 >              <li >                <a href="#">                  <input type="checkBox" ID="2">                  <label for="2"> Level 2 - 1</label>                </a>                <ul >                  <li >                    <a href="#">                      <input type="checkBox" ID="3">                      <label for="3"> Level 3 - 1</label>                    </a>                  </li>                  <li >                    <a href="#">                      <input type="checkBox" ID="4">                      <label for="4"> Level 3 - 2</label>                    </a>                  </li>                </ul>              </li>            </ul>          </li>        </ul>      </div>    </div>

像这样：

06002

解决方法 只需添加此CSS规则：

.tree > ul > li {    display: inline-block;    background-color: #666;    margin: 0 20px 20px 0;    padding-bottom: 20px;}.tree > ul > li:nth-child(odd) {    float: left;}.tree > ul > li a {    color: #fff;}

.tree >ul > li:nth-child(odd) {  float: left;}.tree >ul > li {display: inline-block;  background-color: #666;  margin: 0 20px 20px 0;  padding-bottom: 20px;}.tree >ul > li a {  color: #fff;}.tree li {  margin: 0px 0;  List-style-type: none;  position: relative;  padding: 20px 5px 0px 5px;}.tree li::before {  content: '';  position: absolute;  top: 0;  wIDth: 1px;  height: 100%;  right: auto;  left: -20px;  border-left: 1px solID #ccc;  bottom: 50px;}.tree li::after {  content: '';  position: absolute;  top: 30px;  wIDth: 35px;  height: 20px;  right: auto;  left: -20px;  border-top: 1px solID #ccc;}.tree li a {  display: inline-block;  border: 1px solID #ccc;  padding: 5px 10px;  text-decoration: none;  color: #666;  Font-family: 'Open Sans',@R_403_3726@;  Font-size: 14px;  Font-weight: 600;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  margin-left: 9px;}.tree li a label {  margin-left: 20px;  margin-top: -20px;}/*Remove connectors before root*/.tree > ul > li::before,.tree > ul > li::after {  border: 0;}/*Remove connectors after last child*/.tree li:last-child::before {  height: 30px;}/*Time for some hover effects*//*We will apply the hover effect the the lineage of the element also*/.tree li a:hover,.tree li a:hover + ul li a {  background: #dd4814;  color: #ffffff;  border: 1px solID #dd4814;}/*Connector styles on hover*/.tree li a:hover + ul li::after,.tree li a:hover + ul li::before,.tree li a:hover + ul::before,.tree li a:hover + ul ul::before {  border-color: #dd4814;}.tree-checkBox {  margin: 4px !important;}.tree:before {  border-left: 1px solID #ccc;  bottom: 16px;  content: "";  display: block;  left: 0;  position: absolute;  top: -21px;  wIDth: 1px;  z-index: 1;}        .tree ul:after {  border-top: 1px solID #ccc;  content: "";  height: 20px;  left: -29px;  position: absolute;  right: auto;  top: 30px;  wIDth: 42px;}*:before,*:after {  Box-sizing: border-Box;}.tree {  overflow: auto;  padding-left: 0px;  position: relative;}

<div >    <div >        <div >            <div  ID="nestable" >                <ul ID="tree" >                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="4">                                            <label for="4"> Level 3 - 2</label>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="4">                                            <label for="4"> Level 3 - 2</label>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="4">                                            <label for="4"> Level 3 - 2</label>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="4">                                            <label for="4"> Level 3 - 2</label>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="4">                                            <label for="4"> Level 3 - 2</label>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                    <li >                        <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 >                            <li >                                <a href="#">                                    <input type="checkBox" ID="2">                                    <label for="2"> Level 2 - 1</label>                                </a>                                <ul >                                    <li >                                        <a href="#">                                            <input type="checkBox" ID="3">                                            <label for="3"> Level 3 - 1</label>                                        </a>                                    </li>                                    <li >                                        <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>

总结

以上是内存溢出为你收集整理的html – 如何并排排列ul列表？全部内容，希望文章能够帮你解决html – 如何并排排列ul列表？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。