html - 如何在同一行上放置无限数量的元素？

Question

我有一个菜单:

<ul>
    <li>Tab 01</li>
    <li>Tab 02</li>
    <li>Tab 03</li>
    <li>Tab 04</li>
</ul>

我想根据需要放置尽可能多的选项卡，并且我想让它们保持在同一行。我想创建一个控件来滑动选项卡:

单击右箭头

单击左箭头

我必须在 CSS 上做什么才能获得此行为？同一行上的所有元素，无论元素的数量...

An example of my problem on jsFiddle

Answer 1

我明白你想做什么，如果你漂浮你的 li，你会发现它们被容器包裹并溢出到下一行。要解决这个问题，您需要使用以下代码:

#container{
overflow:hidden;
white-space: nowrap;/*prevents wrapping*/
}

li{
display:inline-block;
zoom:1; *display: inline;/*IE7 Fix for inline-block*/
}

希望这对 friend 有帮助!

W.