显示水平滚动条并强制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。