jQuery UI选项卡的位置低于彼此高度的50％

Question

这很奇怪，我无法让它停止发生。

下面是相关的代码。我为UI轻量级主题使用Google CDN主机。

<div id="prof_div"> 
    <ul> 
     <li><a href="#prof_home">Profile</a></li><br/> 
     <li><a href="#prof_details">Details</a></li><br/> 
     <li><a href="#prof_settings">Settings</a></li><br/> 
    </ul> 

这是唯一相关的HTML。这里是jQuery的/ JavaScript的

$(document).ready(function() { 
     $('#prof_div').tabs({ 
      fx: { height: 'toggle', opacity: 'toggle' } 
     }); 
    }); 

而且它显示是这样的：

TAB 1 
     TAB 2 
      TAB 3 

，而不是像这样：

TAB 1 - TAB 2 - TAB 3 

我有演技没有自定义CSS在这些位置（我甚至消隐我的样式表来检查）。

任何想法为什么会发生这种情况？如有必要，我会发布屏幕截图。

谢谢！ :)

编辑

这里是我的CDN请求

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> 
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script> 

<script type="text/javascript" src="/JSFunctions.js"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.6.4"); 
google.load("jqueryui", "1.8.16"); 
.... 
</script> 

Answer 1

从<li>动手清除那些结束<br/>秒。他们不应该在那里。

<div id="prof_div"> 
<ul> 
    <li><a href="#prof_home">Profile</a></li><br/> 
    <li><a href="#prof_details">Details</a></li><br/> 
    <li><a href="#prof_settings">Settings</a></li><br/> 
</ul> 

这是a fiddle。