水平滚动条问题

Question

我有一个div在固定宽度高度div中包含大量“tile”的问题，我希望它能够水平滚动，因此容器内的tile会滚动滚动条。

以下是jsfiddle中的一些内容。 http://jsfiddle.net/jNbxU/2/

缺少了东西，但必需品已经存在。例如，如果单击“For Kids”框，则查看标有“now choose a picture”的容器，“design 1，design 2”等中的div不应该换行到两行，它们都应该打开一行和滚动。我无法让它发挥作用......

任何帮助都会很棒，谢谢。 ：d

Answer 1

这种效果需要什么，是容器中的容器。外部容器具有overflow: scroll和固定尺寸以允许滚动，并且内部容器具有非常大的宽度，该宽度足以容纳其中的所有元素。我通常使用javascript将内部容器的宽度设置为所有元素的宽度（+边距/边框）。

在html中，它看起来像：

<div class="outer">
  <ul class="inner">
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    ...
  </div>
</div>

还有一些解决方案在内部容器上使用white-space: nowrap之类的东西，但是我最后一次尝试时却无法让它在浏览器中可靠地运行。