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; }