html - 在 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 或

s。

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