我該如何讓李將他們的兄弟姐妹推到相同的高度？

我正在研究導航控件。我有嵌套列出了創建此：我該如何讓李將他們的兄弟姐妹推到相同的高度？

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

如何我可以做到這一點嗎？

來源

2012-03-20 WSkinner

如果你給每一個新行的第一個裏面帶有「clear：both」CSS的類，它應該可以工作。

檢查了這一點，看看它是否是你在找什麼： http://jsfiddle.net/UCHXt/

的HTML是有點難以看穿，但尋找與類的「第二」的李。這應該有所幫助。

來源

2012-03-20 17:32:03

我該如何讓李將他們的兄弟姐妹推到相同的高度？

回答

相關問題