Question

私はナビゲーションコントロールに取り組んでいます。私が達成したい何

が共通の高さを持っている行です

：私はこれを作成し、リストを入れ子にしています。たとえば、「献血センター」と「がん」は1列になり、「献血センター」の高さになります。そして、 "糖尿病" と "緊急ケア" の行を共有するというように...ここで

は、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

新しい行の最初の1文字に「clear：both」というCSSのクラスを付けると、それはうまくいくはずです。

チェックこのアウトし、それはあなたが探しているものだかどうかを確認： http://jsfiddle.net/UCHXt/

HTMLが通過見えるが、「第二」のクラスにリチウムを探すには少し難しいです。それが助けになるはずです。