顯示水平滾動條並強制LI元素中的水平溢出

Question

我有一些CSS和HTML如下。有一個javascript代碼將.tab變成＃tab-container的標籤元素。如果.tab的內容超過寬度/高度，則＃tab-container具有固定的寬度和高度，或者變爲隱藏或溢出。在UL的情況下，我希望它溢出並在div.tab中有滾動條。應該只出現一個水平滾動條。我試着用下面的代碼，但由於某種原因，我只能設法垂直滾動（LI填滿寬度限制，然後出現更多的行......我只想要一行+水平滾動）。我想我無法真正改變這兩個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; } 

Answer 1

變化

.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> s。

此外，你的ul的position: absolute可能會干擾你想要的。 position: absolute將元素從文檔流中取出，因此可能無法按照您希望的方式進行操作。如果您發現該行爲不當，請嘗試將其更改爲position: relative。