在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