当有很多列（或很长的一行）时，如何水平滚动？

Question

我正在尝试添加许多 headers（作为一行），以便我可以向右水平滚动。

我该怎么做。

HTML 代码：

<div id="background">
<div class="row">
    <div class="col-sm-2">
        <h3>Column1</h3>
    </div>

    <div class="col-sm-2">
        <h3>Column2</h3>
    </div>

    <div class="col-sm-2">
        <h3>column3</h3>
    </div>

    <div class="col-sm-2">
        <h3>column4</h3>
    </div>

    <div class="col-sm-2">
        <h3>column5</h3>
    </div>

    <div class="col-sm-2">
        <h3>column6</h3>
    </div>

    <div class="col-sm-2">
        <h3>column7</h3>
    </div>

    <div class="col-sm-2">
        <h3>Column8</h3>
    </div>

    <div class="col-sm-2">
        <h3>Column9</h3>
    </div>

    <div class="col-sm-2">
        <h3>column10</h3>
    </div>
</div>

CSS 代码

#background
{ 
    position: relative;
    background-color:#9B59B6;
    width:100%;
    height: 100%;

}

而不是 headers，每个列都下降了。我希望所有列 (n) 都是 headers，并且我可以水平滚动以查看最后一列 (n)。

而且背景并没有覆盖整个页面，好像只覆盖了栏目，其余的背景都是白色的。

我知道我必须用 javascript 来做，但我真的没有 javascript 的经验。

请帮忙，我是 html 和 css 的新手。谢谢！

Answer 1

不需要 JS，当你知道怎么做时非常简单。

#background { 
    position: relative;
    background-color:#9B59B6;
    width:100%;
    overflow-y: hidden;
    white-space: nowrap;
}

.col-sm-2 { display: inline-block; }

Answer 2

希望这会有所帮助

#background{ 
    position: relative;
    background-color:#9B59B6;
    width:100%;
    height: 200px;
 }
.row{
width:100%;
overflow-x:scroll;
height: 200px;
}
.col-sm-2{
width:auto;
display:table-cell;
}
h3{
width:200px;
}

勾选这个jsfiddle

当有很多列（或很长的一行）时，如何水平滚动？

How to scroll horizontally when there are many columns (or a very long row)?

html

javascript

css

scrollview

multiple-columns