3

この質問のタイトルが言及しているように、私は現在苦労しています:タブコンテンツの幅に応じてメニュータブを中央に配置します。また、コンテンツとメニュー タブの間にギャップがある理由もわかりません。

質問: メニューがタブ コンテンツの幅に適応しないのはなぜですか?

実際の例

ここに画像の説明を入力

CSS jquery ui-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>
4

2 に答える 2

1

ねえ今に追加するためborder-topに使用li 

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

以前はアクティブクラスで上部の境界線を1pxに追加していたためactive class、通常の色の境界線を透明な色で追加できるようになりました。li

于 2012-07-09T04:38:50.743 に答える
0

これが解決策です：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-09T05:31:15.417 に答える