Как я могу заставить ЛИ толкать своих братьев и сестер на одинаковую высоту? - PullRequest
Новая
       2

Как я могу заставить ЛИ толкать своих братьев и сестер на одинаковую высоту?

2 голосов
/ 20 марта 2012

Я работаю над управлением навигацией.У меня есть вложенные списки, которые создают это:

enter image description here

То, что я хотел бы достичь, это строки, которые имеют общую высоту.Например, «Центр донора крови» и «Рак» занимают один ряд и имеют высоту «Центра донора крови».Тогда «Диабет» и «Неотложная помощь» разделяют строку и так далее ...

Вот подмножество 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;
}

Как мне этого добиться?

1 Ответ

1 голос
/ 20 марта 2012

Если вы дадите первому li каждой новой строки класс с CSS «clear: both», он должен работать.

Проверьте это и посмотрите, ищите ли вы: http://jsfiddle.net/UCHXt/

HTML-код немного сложен для просмотра, но ищите li с классом «second». Это должно помочь.

...