jquery - SharePoint 2010 和 JQuery 选项卡

Question

我在主页上添加了 JQuery Tab 控件，但不知道为什么灰色区域会变得很大并且无法找到原因。选项卡正在工作，但有一个丑陋的差距。

这是我的代码，

<asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderMain">
<WebPartPages:SPProxyWebPartManager runat="server" id="spproxywebpartmanager"></WebPartPages:SPProxyWebPartManager>
<div id="ChartTabs">
    <ul>
        <li><a href="#tabs-Gantt">Gantt Chart</a></li> <li><a href="#tabs-Map">Map Chart</a></li>

    </ul>

    <div id="tabs-Gantt">

        <Web Part Zone 1>

     </div>

    <div id="tabs-Map">

         <Web Part Zone 2>      
    </div>

</div>




<asp:Content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">
<style type="text/css">
ul li{
  display: inline;
}

</style>
    <link rel="stylesheet"  href="/sites/xxx/SiteAssets/jquery-ui.css" />
    <script type="text/javascript" src="/sites/xxx/SiteAssets/jquery.min.js"></script>
    <script type="text/javascript" src="/sites/xxx/SiteAssets/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(function() {
        $( "#ChartTabs" ).tabs();
    });
    </script>

</asp:Content>

Answer 1

在列表上设置一个高度来解决这个问题：

<ul style="height: 35px; list-style-type: none;"> ... </ul>