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

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 或 <li> 中。

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