css - 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 演示

使用此规则注释掉 jQuery-UI 选项卡可以正确显示，但是整个内容框被推到我的侧边栏下方。选项？

Answer 1

#tabs将div 也向左 浮动：http: //jsfiddle.net/UCeLf/

#tabs { float:left; }