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를/자바 스크립트가

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

입니다 그리고 다음과 같이 표시하는 것 대신이 같은의

TAB 1 
     TAB 2 
      TAB 3 

:

TAB 1 - TAB 2 - TAB 3 

내가 더 사용자 정의 CSS 전혀 그들에 행동하지 있습니다 (I도 블랭킹 내 스타일 시트 확인).

왜 이런 일이 발생하는지 알고 싶습니다. 필요한 경우 스크린 샷을 게시합니다.

감사합니다. :)

편집

가 여기 내 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입니다.