水平滚动？

Question

我不知道我以前见过这个地方，但我确定有一种方法可以进行水平滚动。

比方说，比如你有多个div是FF：结构：

<div class="container"> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
</div> 

林寻找一种方式，使其水平和不破坏到下一行对齐。将会有一个水平滚动而不是垂直滚动。

通常情况下，如果我做了一个float：left或display：inline，在div填充足够的水平空间后，它将转到下一行。无论如何要让它在一条水平直线上对齐并为此制作一个h-scroll？

Answer 1

这应该工作：

<div class="container"> 
    <div class="scroller"> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    </div> 
</div> 

<style> 
.container { 
    width:200px; 
    overflow:scroll; 
} 
.scroller { 
    width:1000px; 
} 
.content { 
    width:200px; 
    float:left; 
} 
</style> 

Answer 2

你实际上并没有设置在CSS的宽度。设置宽度很糟糕，因为它不会让您放大，意味着每次创建新元素时都必须更改宽度。相反，您应该给予.container级别white-space: nowrap规则并将其子级display设置为inline-block。例如。

.container { 
    white-space: nowrap; 
} 

.container > div { 
    display: inline-block; 
} 

现在您不再需要设置宽度以获得此水平滚动功能。