4

次のようなCSSとHTMLがあります。.tabを＃tab-containerのタブ付き要素に変換するJavaScriptコードがあります。＃tab-containerの幅と高さは固定されているため、.tabのコンテンツが幅/高さを超えると、非表示になるかオーバーフローします。ULの場合、オーバーフローしてdiv.tab内にスクロールバーを配置したいと思います。水平スクロールバーのみが表示されます。以下のコードで試しましたが、何らかの理由で垂直方向にしかスクロールできません（LIが幅の制限を埋めると、さらに行が表示されます... 1行+水平スクロールのみが必要です）。2つのDIVを実際に変更することはできないと思います。そうしないと、タブが壊れてしまいます。.tabレイヤー内にソリューションが必要です。

HTML：

<div id="tab-container">
    <div class="tab">
       <ul>
           <li><img src="img01.png" width="96" height="96" /></li>
           <li><img src="img02.png" width="96" height="96" /></li>
           <li><img src="img03.png" width="96" height="96" /></li>
           <li><img src="img04.png" width="96" height="96" /></li>
       </ul>
</div>

CSS：

#tab-container { width: 500px; height: 200px; position: relative; overflow: hidden; } 
.tab { position: relative; overflow: hidden;}
#tab-container .tab ul { position: absolute; width: auto; display: block; overflow: scroll; }
#tab-container .tab ul li { display: inline-block; position: relative; }
4

1 に答える 1

4

変化する

.tab {
  overflow: hidden;
}

に

.tab {
  overflow-x: scroll; /* or auto, if you don't want the scroll bar visible all of the time. */
  overflow-y: hidden;
}

まだラップしていることがwhite-space: nowrapわかった場合は、div.tabsまたは<li>に追加する必要があります。

さらに、あなたのulposition: absoluteはあなたが望むものに干渉する可能性があります。position: absoluteドキュメントフローから要素を削除するため、希望どおりに動作しない場合があります。誤動作していることがわかった場合は、に変更してみてくださいposition: relative。

于 2012-01-12T14:30:26.393 に答える