水平滚动？ [英] Horizontal Scrolling?

问题描述

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

I am not sure where i've seen this before, but im sure that there is a way to make horizontal scroll.

让我们说，多个DIV是ff：结构：

Lets say, for example you have multiple DIVs is the ff: structure:

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

我正在寻找一种方式使它水平对齐，而不打破下一行。

Im looking for a way to make it align horizontally and without breaking to the next line. And there will be a horizontal scroll instead of vertical scroll.

通常情况下，如果我做了一个float：left或display：inline，在div填充足够的水平空间后，转到下一行。

Normally if I did a float:left or display:inline, after the the div fill enough horizontal space it will go to next line. Is there anyway to make it align in a straight horizontal line and make a h-scroll for that?

推荐答案

这应该可以工作：

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

这篇关于水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！