css div和浮动定位错误

Question

我有一个由左侧菜单和下一个div中的主要内容组成的布局。但是，发生的事情是内容div似乎没有正确定位。它位于菜单的中间位置，而不是在顶部正确对齐。作为css的新手，如果有人能指出我的错误，我将不胜感激。请原谅内联风格，但这只是为了学习。我在小提琴上发布了原始代码，但是当我提交我的问题时，消息声明提供内联代码。谢谢

更新：添加图像。

<script type="text/javascript"> 
    $(function() { 
     $("#menu").menu(); 
    }); 
    </script> 

    <script type="text/javascript"> 
    $(function() { 
     $("#menuevents").menu(); 
    }); 
    </script> 



<ul id="menuevents" style="width:20%;margin-top:5px;float:left;height:auto !important;"> 
      <div style="padding:255px 0 5px 3px;color:blue;float:left;clear:both;"></div> 

     <li><a href="#">Inbox</a></li> 
     <li><a href="#">Sent Items</a></li> 
     <li><a href="#">Junk Email</a></li> 
     <li><a href="#">Deleted Items</a></li> 
     <li class="ui-state-disabled"><a href="#">Drafts</a></li> 

     <li> 
      <a href="#">Delphi</a> 
      <ul> 
       <li class="ui-state-disabled"><a href="#">Ada</a></li> 
       <li><a href="#">Saarland</a></li> 
       <li><a href="#">Salzburg</a></li> 
      </ul> 
     </li> 

     <li><a href="#">Saarland</a></li> 
     <li> 
      <a href="#">Salzburg</a> 
      <ul> 
       <li> 
        <a href="#">Delphi</a> 
        <ul> 
         <li><a href="#">Ada</a></li> 
         <li><a href="#">Saarland</a></li> 
         <li><a href="#">Salzburg</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Delphi</a> 
        <ul> 
         <li><a href="#">Ada</a></li> 
         <li><a href="#">Saarland</a></li> 
         <li><a href="#">Salzburg</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Perch</a></li> 
      </ul> 
     </li> 
     <li class="ui-state-disabled"><a href="#">Amesville</a></li> 

    </ul> 

    <ul id="menu" style="width:20%;margin-top:15px;float:left;clear:both;height:auto !important;"> 


     <li><a href="#">Inbox</a></li> 
     <li><a href="#">Sent Items</a></li> 
     <li><a href="#">Junk Email</a></li> 
     <li><a href="#">Deleted Items</a></li> 
     <li class="ui-state-disabled"><a href="#">Drafts</a></li> 

     <li> 
      <a href="#">Delphi</a> 
      <ul> 
       <li class="ui-state-disabled"><a href="#">Ada</a></li> 
       <li><a href="#">Saarland</a></li> 
       <li><a href="#">Salzburg</a></li> 
      </ul> 
     </li> 

     <li><a href="#">Saarland</a></li> 
     <li> 
      <a href="#">Salzburg</a> 
      <ul> 
       <li> 
        <a href="#">Delphi</a> 
        <ul> 
         <li><a href="#">Ada</a></li> 
         <li><a href="#">Saarland</a></li> 
         <li><a href="#">Salzburg</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Delphi</a> 
        <ul> 
         <li><a href="#">Ada</a></li> 
         <li><a href="#">Saarland</a></li> 
         <li><a href="#">Salzburg</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Perch</a></li> 
      </ul> 
     </li> 
     <li class="ui-state-disabled"><a href="#">Amesville</a></li> 

    </ul> 

    <div style="padding-left:1%;float:left;clear:inherit;">&nbsp;</div> 

     <div id="main" style="width:25%;border-left:thin solid #cccccc;border-right:thin solid #cccccc;padding:0 0 0 2%;height:500px;float:left;overflow:auto;"> 
      <br /> 

      <table id="customers"> 
      <form <form name="search" action="" method="POST" enctype="application/x-www-form-urlencoded"> 
      <input type="text" id="mailsearch" name="mailsearch" value="Search" size="40" maxlength="40" min="" max="" accept=""/> 

      </form> 
      <br /><br /> 

    </table> 

     </div> 

http://jsfiddle.net/jHRgc/7/

Answer 1

取出float从#main股利。菜单本身可以浮动，生活的内容相应地定位自己。

Answer 2

您应该能够通过移除#main上不必要的浮动块并为两个菜单添加导航包装来正确浮动。试试这个CSS：

#main{ 
    border: 1px solid rgba(0,0,0,.25); 
    padding: 10px; 
} 
nav{ 
    float: left; 
} 
#menuevents, #menu{ 
    margin:5px 10px 0 0; 
} 
#menu{ 
    margin-top:15px; 
}​ 

更改您的HTML这样的：

<nav> 
    <ul id="menuevents">  
    <li><a href="#">Inbox</a></li> 
    <li><a href="#">Sent Items</a></li> 
    <li><a href="#">Junk Email</a></li> 
    <li><a href="#">Deleted Items</a></li> 
    <li class="ui-state-disabled"><a href="#">Drafts</a></li> 

    <li> 
     <a href="#">Delphi</a> 
     <ul> 
      <li class="ui-state-disabled"><a href="#">Ada</a></li> 
      <li><a href="#">Saarland</a></li> 
      <li><a href="#">Salzburg</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Saarland</a></li> 
    <li> 
     <a href="#">Salzburg</a> 
     <ul> 
      <li> 
       <a href="#">Delphi</a> 
       <ul> 
        <li><a href="#">Ada</a></li> 
        <li><a href="#">Saarland</a></li> 
        <li><a href="#">Salzburg</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Delphi</a> 
       <ul> 
        <li><a href="#">Ada</a></li> 
        <li><a href="#">Saarland</a></li> 
        <li><a href="#">Salzburg</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Perch</a></li> 
     </ul> 
    </li> 
    <li class="ui-state-disabled"><a href="#">Amesville</a></li> 

    </ul> 

    <ul id="menu"> 
    <li><a href="#">Inbox</a></li> 
    <li><a href="#">Sent Items</a></li> 
    <li><a href="#">Junk Email</a></li> 
    <li><a href="#">Deleted Items</a></li> 
    <li class="ui-state-disabled"><a href="#">Drafts</a></li> 

    <li> 
     <a href="#">Delphi</a> 
     <ul> 
      <li class="ui-state-disabled"><a href="#">Ada</a></li> 
      <li><a href="#">Saarland</a></li> 
      <li><a href="#">Salzburg</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Saarland</a></li> 
    <li> 
     <a href="#">Salzburg</a> 
     <ul> 
      <li> 
       <a href="#">Delphi</a> 
       <ul> 
        <li><a href="#">Ada</a></li> 
        <li><a href="#">Saarland</a></li> 
        <li><a href="#">Salzburg</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Delphi</a> 
       <ul> 
        <li><a href="#">Ada</a></li> 
        <li><a href="#">Saarland</a></li> 
        <li><a href="#">Salzburg</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Perch</a></li> 
     </ul> 
    </li> 
    <li class="ui-state-disabled"><a href="#">Amesville</a></li>  
    </ul> 
</nav> 
<div id="main" style=""> 
    <form <form name="search" action="" method="POST" enctype="application/x-www-form-urlencoded"> 
     <input type="text" id="mailsearch" name="mailsearch" value="Search" size="40" maxlength="40" min="" max="" accept=""/> 
    </form> 
</div> 

http://jsfiddle.net/YPXqd/6/

注意：你不应该使用内联样式，除非你绝对必须的。注意＃2：您应该不惜一切代价避免使用!important。