html - 为什么我的列表没有 float 在我的第二个 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 像素宽的顶部菜单 div 中？

Answer 1

需要加一个clear:both div来处理内部 float

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