html - 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从你的#maindiv 中删除。单独的菜单可以浮动，使内容相应地定位。

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/

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