4

我有一些 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; }
4

1 回答 1

4

改变

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

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

于 2012-01-12T14:30:26.393 回答