我如何让LI将他们的兄弟姐妹推到同一高度？

Question

我正在研究导航控件。我有嵌套列表创建了这个：

我想要达到的是具有共同高度的行。例如，“献血者中心”和“癌症”将占据一排并具有“献血者中心”的高度。那么“糖尿病”和“紧急护理”将分享一行等等......

以下是HTML的一个子集：

<div id='health-services-flyout'>
                <ul >
                    <li class="first">
                        <a href="/torrance/pages/Blood-Donor-Center.aspx">
                            Blood Donor Center
                        </a>
                        <ul >
                            <li class="first">
                                <a href="/torrance/pages/Blood-Donor-Center-services.aspx">
                                    Services
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-blood-facts.aspx">
                                    Blood Facts
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-faq.aspx">
                                    Frequently Asked Questions
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-half-gallon-club.aspx">
                                    Half Gallon Club
                                </a>
                            </li>
                            <li class="last">
                                <a href="/torrance/pages/Blood-Donor-Center-hiv-testing-sites.aspx">
                                    HIV Testing Sites for Los Angeles County
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li >
                        <a href="/torrance/pages/cancer.aspx">
                            Cancer
                        </a>
                        <ul >
                            <li class="first">
                                <a href="/torrance/pages/cancer-treatments.aspx">
                                    Services
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/imaging-Locations.aspx">
                                    Conditions
                                </a>
                            </li>
                            <li>
                                <a>
                                    Our Team
                                </a>
                            </li>
                            <li class="last">
                                <a>
                                    Patient & Family Support
                                </a>
                            </li>
                        </ul>
                    </li>

CSS：

#health-services-flyout ul > li {
    float: left;
    width: 200px;
    display: block;
    line-height: 20px;
}

#health-services-flyout ul > li.last {
    clear:left;
    float:none;
}


#health-services-flyout ul > li > a, #health-services-flyout ul > li > a:visited, #health-services-flyout ul > li > a:hover {
  font-size: 11px;
  color: #333333;
  text-decoration:none;
  font-weight:bold;
}

#health-services-flyout ul > li > a:hover {
    text-decoration: underline;
}

#health-services-flyout ul > li > ul {
  float: none;
}


#health-services-flyout ul > li > ul > li {
    clear: left;
    display: block;
    float: none;
    font-weight: normal;
    line-height: 16px;
}

#health-services-flyout ul > li > ul > li > a, #health-services-flyout ul > li > ul > li > a:visited, #health-services-flyout ul > li > ul > li > a:hover {
    color: #004A89;
    font-size: 9px;
    font-weight: normal;
    text-decoration: none;
}

#health-services-flyout ul > li > ul > li > a:hover {
    text-decoration: underline;
}

我怎样才能做到这一点？

Answer 1

如果你给每个新行的第一个li给一个CSS为“clear：both”的类，它应该可以工作。

检查一下，看看它是不是你要找的东西： http://jsfiddle.net/UCHXt/

HTML有点难以查看，但查找带有“second”类的li。这应该有所帮助。