Question

我有一些CSS和HTML，如下所示。有一个javascript代码可以将.tab转换为#tab-container的选项卡元素。由于.tab-container具有固定的宽度和高度，如果.tab的内容超过宽度/高度，则会隐藏或溢出。在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或＆lt; li＆gt; s。

此外，你的ul position: absolute可能会干扰你想要的东西。 position: absolute将元素从文档流中取出，因此它可能不会按照您希望的方式运行。如果您发现行为不当，请尝试将其更改为position: relative。

显示水平滚动条并强制LI元素中的水平溢出

1 个答案: