javascript - 当有很多列(或很长的一行)时，如何水平滚动？

Question

我正在尝试添加许多标题(作为一行)，以便我可以向右水平滚动。

我该怎么做。

现场演示:https://jsfiddle.net/szve8s2w/1/

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

}

不是标题，而是所有列都下降了。我希望所有列 (n) 都是标题，并且我可以水平滚动以查看最后一列 (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; }