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

首先，最重要的是你使用＆＃39; .col-sm-3＆＃39;如果你不想使用它的属性，现在回答你的问题，那么引导程序类就会浮动：左：＆＃39; ＆＃39; .col-sm-3＆＃39;的财产搞砸了。简单地说，覆盖它并解决问题。

.c {
   float:none;
}

或从HTML中删除col-sm-3

那是：）

Answer 2

为white-space: nowrap提供.c：

.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 个答案:

DEMO