jQuery-ui选项卡CSS功能不正常

Question

我正在研究PHP中的高级数据库管理器（主要是phpMyAdmin的傻瓜，只给管理员创建表的能力，然后管理员为用户输入数据创建表单）。对于大多数应用程序，我比后台更关注外观，所以我一直在借用jQuery-UI来加速编码。

当我创建管理仪表板时，遇到了一个问题。我使用了jQuery-UI选项卡的默认实现，并且ui-tab-nav将自身拉伸以垂直填充页面。

我跟踪的误差矿井下面的CSS规则：

#sidebar { float:left; } 

这说明我有错误：

$(function() { 
 
    $("#tabs").tabs(); 
 
});

html,body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#sidebar { 
 
    float: left; 
 
    height: 100%; 
 
    width: 200px; 
 
    margin: inherit; 
 
    padding: inherit; 
 
    overflow: auto; 
 
    border-right: solid 1px #000; 
 
} 
 
#sidebar .menu { 
 
    margin: 10px; 
 
    padding: inherit; 
 
    list-style: none; 
 
} 
 
.title { 
 
    font-size: 1.5em; 
 
    font-weight: bold; 
 
    margin: inherit; 
 
    padding: inherit; 
 
} 
 
#sidebar .menu .nav-section { 
 
    font-size: 1.5em; 
 
    font-weight: bold; 
 
    border-bottom: solid 1px #000; 
 
    margin: 20px 0; 
 
    padding: inherit; 
 
} 
 
#content { 
 
    position: relative; 
 
    margin-left: 201px; 
 
    /* 200px width + 1px border */ 
 
    padding: inherit; 
 
} 
 
#header { 
 
    margin: inherit; 
 
    padding: inherit; 
 
    background: #FF9; 
 
} 
 
#header label { 
 
    margin-left: 20px; 
 
} 
 
#myForm th { 
 
    background-color: #999; 
 
    border: 1px #000 solid; 
 
} 
 
#myForm td { 
 
    border: 1px #000 solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div id="sidebar"> 
 
    <h2 class="title">DBManager: <em>Administrators</em></h2> 
 
    <ul class="menu"> 
 
     <li class="nav-section">Forms</li> 
 
     <li><a href="?form=demos">Demos</a> - <a href="?form=demos&edit=1">Edit</a></li> 
 
     <li class="nav-section">Reports</li> 
 
     <li><a href="?report=school-copy">School Copy</a> - <a href="?report=school-copy&edit=1">Edit</a></li> 
 
     <li class="nav-section">Actions</li> 
 
     <li><a href="phpMyAdmin">phpMyAdmin</a></li> 
 
     <li><a href="?dashboard=1">Dashboard</a></li> 
 
     <li><a href="?logout=1">Logout</a></li> 
 
    </ul> 
 
</div> 
 

 
<div id="content"> 
 
    <div id="tabs"> 
 
     <ul> 
 
      <li><a href="#tabs-1">First</a></li> 
 
      <li><a href="#tabs-2">Second</a></li> 
 
      <li><a href="#tabs-3">Third</a></li> 
 
     </ul> 
 
     <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
 
     <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
 
    </div> 
 
</div>

JSFiddle Demo

有了这条规则注释掉jQuery-UI选项卡正确显示，但是整个内容框被推到我的边栏下方。选项？

Answer 1

浮#tabs DIV左以及：http://jsfiddle.net/UCeLf/

#tabs { float:left; }