导航菜单为jquery ui选项卡调整问题

我目前正在努力为这个问题的标题提到：根据标签内容的宽度居中菜单选项卡。另外我不确定为什么内容和菜单选项卡之间存在差距。导航菜单为jquery ui选项卡调整问题

问题：为什么菜单不适应标签内容的宽度？

enter image description here

CSS的jQuery用户界面 - tabs.css

<style> 
    #page-wrap       { width: 675px; margin: auto; background:#FFF;} 


    .ui-tabs       { zoom: 1; } 
    .ui-tabs .ui-tabs-nav    { list-style: none; position: relative; overflow: hidden; 
              z-index: 1000; } 
    .ui-tabs .ui-tabs-nav li   { position: relative; float: left; 
              border-bottom-width: 0 !important; background: #EBEBEB; } 
    .ui-tabs .ui-tabs-nav li a   { float: left; text-decoration: none; padding: 5px 10px ; outline: medium none; font-weight: bold; font-size:11px; line-height: 
    35px;} 
    .ui-tabs .ui-tabs-nav 
    li.ui-tabs-selected     { border-bottom-width: 0; background: #F9AE5C; color: #6A6A6A; border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; } 
    .ui-tabs .ui-tabs-nav 
    li.ui-tabs-selected a, .ui-tabs 
    .ui-tabs-nav li.ui-state-disabled a, 
    .ui-tabs .ui-tabs-nav 
    li.ui-state-processing a   { cursor: text; } 
    .ui-tabs .ui-tabs-nav li a, 
    .ui-tabs.ui-tabs-collapsible 
    .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 
    .ui-tabs .ui-tabs-panel    { padding: 20px; display: block; border-width: 0; background: none; 
              position: relative; min-height: 100px; border: 1px solid #D4D4D4; } 
    .ui-tabs .ui-tabs-hide    { display: none !important; } 
    .pngIcon{ padding:0px 5px 0px 5px; vertical-align:top;} 


    a.mover        { background: #900; padding: 6px 12px; position: absolute; 
              color: white; font-weight: bold; text-decoration: none;} 
    .next-tab       { bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } 
    .prev-tab       { bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; } 
</style>

来源

2012-07-09 techAddict82

+1好格式化 – Rab 2012-07-09 04:35:52

你是否想要这样的东西http://jsfiddle.net/GDABm/ – SVS 2012-07-09 05:20:38

@SVS是的，这是正确的。标签的导航栏与内容宽度相同。你是怎么做到的？ – techAddict82 2012-07-09 05:26:00

这里是解决方案添加透明色边框：http://jsfiddle.net/surendraVsingh/GDABm/1/

CSS的变化：

.ui-tabs{ 
    zoom: 1; 
    text-align:center; /* Add This */ 
} 

.ui-tabs .ui-tabs-nav{ 
    list-style: none; 
    position: relative; 
    overflow: hidden; 
    z-index: 1000; 
    display:inline-block; /* Add This */ 
}

来源

2012-07-09 05:31:15 SVS

嘿，现在用来添加到border-topli

.ui-tabs .ui-tabs-nav li { 
    border-top: 1px solid transparent; 
}

，因为你曾经active class上边框添加在您的活动类现在为1px，这样就可以在你的正常li

来源

2012-07-09 04:38:50

导航菜单为jquery ui选项卡调整问题

回答

相关问题