CSS Float最大的列表項，清除x元素後的浮動IE7問題

Question

所以我有一個由列表組成的頁腳，這些是左邊的浮動和5個項目之後我想要一個新的線條開始。

這適用於所有瀏覽器，但不適用於IE7。

所以我所做的是，在6項即在第二行添加了類第一項..

 .liClearLeft  { clear: left;} 

的問題是，IE7即使第二線浮動，左，高度是關閉的，它們不是垂直對齊的，它似乎取決於第一排的高度。所以我猜我在想如何在IE7中獲得要垂直對齊的行嗎？

代碼

<div id="footerContainer" class="clearfix"> 
<div class="container"> 
    <div id="footerMainMenu" class="clearfix"> 
      <asp:Repeater ID="footerMenuRepeater" runat="server" onitemdatabound="FooterMenuRepeaterItemDataBound"> 
       <HeaderTemplate> 
        <ul id="mainMenuList"> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <li class="footerParentSubLists <%# ((FooterMenuItem)Container.DataItem).MenuTitleBoldClass %> <%# Container.ItemIndex == 5 ? "liClearLeft" : string.Empty %>"> 
         <div id="footerMenuDiv"> 
          <a class="footerMenuHeader" href='<%# ((FooterMenuItem)Container.DataItem).CallToActionLink %>'><%# ((FooterMenuItem)Container.DataItem).Title %></a> 
         </div> 
         <asp:Repeater ID="subItemRepeater" runat="server"> 
          <HeaderTemplate> 
           <ul class="footerChildSubList"> 
          </HeaderTemplate> 
          <ItemTemplate> 
           <li><a class="footerMenuItems <%# ((FooterMenuItem)Container.DataItem).ArrowClass %>" href="<%# ((FooterMenuItem)Container.DataItem).CallToActionLink %>"><%# ((FooterMenuItem)Container.DataItem).Title %></a> 
           </li> 
          </ItemTemplate> 
          <FooterTemplate> 
           </ul> 
          </FooterTemplate> 
         </asp:Repeater>     
        </li> 
       </ItemTemplate> 
       <FooterTemplate> 
        </ul> 
       </FooterTemplate> 
      </asp:Repeater> 
    </div> 

CSS：

似乎對IE7工作

.footerParentSubLists { 
     float: left; 
     width: 170px; 
     max-width: 170px; 
     margin-right: 20px !important; 
    } 
    .footerChildSubList { 
     margin: 0px; 
     position: relative; 
    } 

Answer 1

一種解決方案是增加一個 「行」 li和ul周圍每隔五footerParentSubLists。你可以看到效果in this fiddle。使用這種測試代碼：

HTML

<ul id="mainMenuList"> 
    <li> <!-- row 1 --> 
     <ul> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 1</a> 
       </div> 
       <ul class="footerChildSubList"> 
        <li> 
         <a>Sub 1.1</a> 
        </li> 
        <li> 
         <a>Sub 1.2</a> 
        </li> 
        <li> 
         <a>Sub 1.3</a> 
        </li> 
       </ul> 
      </li> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 2</a> 
       </div> 
       <ul class="footerChildSubList"> 
        <li> 
         <a>Sub 2.1</a> 
        </li> 
        <li> 
         <a>Sub 2.2</a> 
        </li> 
       </ul> 
      </li> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 3</a> 
       </div> 
      </li> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 4</a> 
       </div> 
      </li> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 5</a> 
       </div> 
       <ul class="footerChildSubList"> 
        <li> 
         <a>Sub 5.1</a> 
        </li> 
        <li> 
         <a>Sub 5.2</a> 
        </li> 
       </ul> 
      </li>    
     </ul>  
    </li> 
    <li> <!-- row 2 --> 
     <ul> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 6</a> 
       </div> 
       <ul class="footerChildSubList"> 
        <li> 
         <a>Sub 6.1</a> 
        </li> 
        <li> 
         <a>Sub 6.2</a> 
        </li> 
        <li> 
         <a>Sub 6.3</a> 
        </li> 
       </ul> 
      </li> 
      <li class="footerParentSubLists"> 
       <div> 
        <a class="footerMenuHeader">Header 7</a> 
       </div> 
       <ul class="footerChildSubList"> 
        <li> 
         <a>Sub 7.1</a> 
        </li> 
        <li> 
         <a>Sub 7.2</a> 
        </li> 
        <li> 
         <a>Sub 7.3</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS

#mainMenuList { 
    width: 950px; 
} 

#mainMenuList li { 
    float: left; 
} 

#mainMenuList .footerParentSubLists { 
    width: 170px; 
    max-width: 170px; 
    margin-right: 20px; 
} 

#mainMenuList .footerParentSubLists li { 
    float: none; 
    padding-left: 10px; 
}