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