Question

这是HTML：

<nav class="listfirst"> 
    <li class="header"></li> 
    <li><a href="#"></li> 
    <li><a href="#"></li> 
    <li><a href="#"></li> 
    <li><a href="#"></li> 
    <li><a href="#"></li> 
</nav>

和CSS：

#bottomnav{
    width:1000px;
    height:300px;
    position:absolute;
    top:5px;
    left:10px;
}

#bottomnav .list1{
    float:left;
    margin-right:20px;
}


#bottomnav .listfirst{
    float:left;
    margin-right:20px;
    margin-left:22px;
}

#bottomnav li{
    width:165px;
    height:22px;
    margin-left:10px;
    list-style-type: none;
    display:block;
}

IE7中的列表只是显示为块并溢出容器，而我需要它们向左浮动以保留在bottomnav容器中。

我知道这可能是一个简单的CSS修复，但有人有任何建议吗？

Answer 1

请尝试以下css代码。

  #bottomnav .list1{
     float:left;
     margin-right:20px;
     *float:left;  // this property apply in IE7
   }

Answer 2

我认为您的HTML不正确。始终需要将<li>放在<ul>标记之间，也许您错过了关闭<a>代码？

示例：

<nav class="listfirst">
   <ul>
      <li><a href="#">Foo</a></li>
      <li><a href="#">Foo</a></li>
   </ul>
</nav>

Answer 3

你必须指定：

#bottomnav li { 
    float:left;
}

欢呼声

列表中没有的css float

3 个答案: