Question

我想要一组div在一行中对齐，越过页面宽度并滚动horizzontaly。

|----  page  ----|

[ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

我尝试了不同的选项，例如左浮动，内联显示等，但我的所有试验最终都会出现在页面宽度的第二行：

|----  page  ----|

[ ][ ][ ][ ][ ][ ]
[ ][ ]

这是一个jsfiddle

的CSS：

.container {
    width: auto;
}
.foo {
    background-color:red;
    width: 20px;
    height:20px;
    margin: 2px;
    float: left;
}

HTML：

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

Answer 1

这将为您完成这项工作：

.container {
    white-space: nowrap;
}
.foo {
    display: inline-block;
    background-color:red;
    width: 20px;
    height:20px;
    margin: 2px;
    zoom: 1; / for less than ie8 support
    *display: inline; / for less than ie8 support
}

演示：http://jsfiddle.net/PexbZ/1/

CSS：在页面上展开一行宽度

1 个答案: