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没有显示在我推杆的位置？我的意思是为什么它不会显示在我的topmenu div中，它是白色背景并且只有900px宽？

Answer 1

你需要添加一个clear：两个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;
}

为什么我的名单不在我的第二个div中？

2 个答案: