css - jQuery-ui 选项卡 CSS 无法正常运行

Question

我正在使用 PHP 开发一个高级数据库管理器(本质上是傻瓜 phpMyAdmin，只允许管理员创建表，然后管理员创建表单供用户输入数据)。对于大多数此类应用程序，我更关心后端而不是外观，因此我一直在借用 jQuery-UI 来加快编码速度。

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

我已将错误追溯到我的以下 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; }