有問題的CSS浮動jQuery-UI選項卡

我遇到了jQueryUi選項卡的問題。我想在我的選項卡視圖左側有一個導航欄，但佈局不起作用。我認爲這是一個錯誤，我會將它報告給jQuery，但首先我想看看您是否可以確認這是一個錯誤，還是我做錯了什麼？有問題的CSS浮動jQuery-UI選項卡

預覽我的示例[http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html]。

首先你會看到非工作標籤的例子，下面是工作標準的浮動div例子。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JQuery Tablayout problems</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body> 
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div> 
<div id="tabs"><ul><li><a href="#a1">A tab page</a></li></ul> 
    <div id="a1">Do you see a red bar left of this tab view?</a></div> 
</div> 

<div style="float:clear"></div> 

<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div> 
<div id="no-tabs"><ul><li><a href="#a2">A tab page</a></li></ul> 
    <div id="a2">Do you see a red bar left of this tab view?</a></div> 
</div> 
</body> 
</html>

來源

2011-07-23 BikingGlobetrotter

這裏的解決方案解決了我的問題，它看起來有點像你的問題。請參閱 jquery ui tip floated divs inside瞭解更多信息。

#yourTabsDiv { 
    float:left; 

    width: 100%; 

}

來源

2011-09-19 20:18:02 woz1010

非常感謝你。這節省了我很多工作：D – Mathlight

這應該被標記爲答案 –

有問題的CSS浮動jQuery-UI選項卡

回答

相關問題