为什么我的列表没有浮动在我的第二个 div 中？

Question

这是我的 HTML：

 <div class="topmenucontainer">
    <div id="topmenu">
    <ul>
    <li style="border-right: 1px solid black;"><a href="">Login</a></li>  
    <li><a href="">Partner Countries</a></li> 
    </ul>
    </div>

这是我的 CSS：

.topmenucontainer {  
    margin:0 auto; 
    border:1px solid red;  
    background-color:#000;
    display:block;
}

#topmenu {  
    margin:0 auto;  
    border:1px solid red;
    /*min-height:25px;*/
    background-color:#fff;
    width:900px;
    display:inline;
}

#topmenu ul {
    margin:0px; padding:0px;
    list-style-type: none; 
    float:right;
}

#topmenu ul li {
    float:left;
}

这就是它的显示方式

http://img842.imageshack.us/img842/8627/3ktn.jpg

为什么 UL 没有显示在我放置的位置？我的意思是为什么它没有显示在我的白色背景且只有 900 像素宽的 topmenu div 中？

Answer 1

你需要添加一个 clear:both div 来处理内部浮动

 <div class="topmenucontainer">
    <div id="topmenu">
      <ul>
        <li style="border-right: 1px solid black;"><a href="">Login</a></li>  
        <li><a href="">Partner Countries</a></li> 
      </ul>
      <div style="clear:both;"></div>
    </div>
</div>

Answer 2

我认为您的.topmenucontainer* 不需要任何样式。您可以摆脱 .topmenucontainer 样式

您可以在topmenu 上尝试以下样式。您对您要实现的目标有最终的了解吗？

#topmenu {
   overflow: hidden;
   margin: 0 auto;
   border: 1px solid red;
   background-color: #fff;
   width: 900px;
}