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

【问题标题】：How to scroll horizontally when there are many columns (or a very long row)?当有很多列（或很长的行）时如何水平滚动？
【发布时间】：2016-05-30 06:03:11
【问题描述】：

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

我该怎么做。

现场演示：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 的新手。谢谢！

【问题讨论】：

标签： javascript html css scrollview multiple-columns

【解决方案1】：

不需要 JS，只要你知道怎么做就很简单。

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

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

【讨论】：

感谢您的帮助！
没问题@JasonChristopher 很高兴它有帮助

【解决方案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

【讨论】：

为什么要使用 display: table-cell; ?