在div中水平滚动

Question

我试图在div中实现水平滚动。 它在较小的屏幕上可以正常工作。 对于大屏幕（桌面），div内容会追加到另一行。 如何避免这种情况？

HTML：

  <body>
<div class="container-fluid" id="scrollquestion" style="overflow-x:scroll;white-space: nowrap;overflow-y:hidden ;top: 500px; padding: 4px; width:auto;">

    <div class="col-sm-3 c">
        <h6>2</h6>

    </div>
    <div class="col-sm-3 c">
        <h6>3</h6>

    </div>
    <div class="col-sm-3 c">
        <h6>4</h6>

    </div>
    <div class="col-sm-3 c">
        <h6>5</h6>

    </div>
      <div class="col-sm-3 c">
        <h6>5</h6>

    </div>
      <div class="col-sm-3 c">
        <h6>5</h6>

    </div>
      <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div><div class="col-sm-3 c">
        <h6> 5</h6>

    </div><div class="col-sm-3 c">
        <h6> 5</h6>

    </div><div class="col-sm-3 c">
        <h6> 5</h6>

    </div><div class="col-sm-3 c">
        <h6> 5</h6>

    </div><div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
            <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
            <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>
    <div class="col-sm-3 c">
        <h6> 5</h6>

    </div>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

CSS：

.col-sm-3{display: inline-block;width:auto;}
.c {
   color: #64cbcd;
   font-size: 11px;
   border-radius: 50%;
   width: 40px;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   border-color: blue;
   box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
    padding-right: 10px;
    padding-left: 3px;
    margin-left: 10px;
    margin-right:10px
}

对于较小的屏幕，它可以按预期工作。 检查： https : //jsfiddle.net/rejithrkrishnan/jeoh5220/2/

在桌面中，如下图所示。

Answer 1

首先也是最重要的一点，如果您不想使用引导属性的.col-sm-3类，而现在却想回答问题“ .col-sm-3”的“ float：left”属性，为什么？搞砸了。 只需覆盖它，问题就会得到解决。

.c {
   float:none;
}

或者从HTML删除col-sm-3

没错:)

Answer 2

给出white-space: nowrap .c white-space: nowrap ：

.c {
  white-space: nowrap
}

Answer 3

我增加了容器的高度，对我有用！

Answer 4

它不可能通过CSS，使用jQuery，找到孩子的宽度并应用它

var width = 0;
$('.c').each(function() {
    width += $(this).outerWidth( true );
});
$('.horizontal-scroll').css('width', width+100);

在div中水平滚动

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-08-17 09:30:40

解决方案2
1 2015-08-17 09:20:43

解决方案3
1 2015-08-17 09:22:38

解决方案4
1 2015-08-17 09:33:27

DEMO

在div中水平滚动

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-08-17 09:30:40

解决方案2 1 2015-08-17 09:20:43

解决方案3 1 2015-08-17 09:22:38

解决方案4 1 2015-08-17 09:33:27

DEMO

解决方案1
2 已采纳 2015-08-17 09:30:40

解决方案2
1 2015-08-17 09:20:43

解决方案3
1 2015-08-17 09:22:38

解决方案4
1 2015-08-17 09:33:27