我试图在 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/
在桌面上，它如下图所示。
最佳答案
首先，也是最重要的一点，如果您不想使用它的属性，为什么要使用 '.col-sm-3' 类的 Bootstrap ，现在回答您的问题 '.col-sm 的 'float:left' 属性-3' 搞砸了。只需简单地覆盖它，问题就会得到解决。
.c {
float:none;
}
或者从 HTML 中删除 col-sm-3
就是这样:)
关于javascript - 在 div 内水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32046659/