Scroll horizontally inside a div
Question
I was trying to implement a horizontal scroll inside a div. It works as expected in smaller screen. For large screen(desktop), the div contents appends to another line. How to avoid this.?
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
}
For smaller screen, it works as expected. Check : https://jsfiddle.net/rejithrkrishnan/jeoh5220/2/
In desktop, it comes as the following image.
4 answers
solution1
2 ACCPTED 2015-08-17 09:30:40
First and most important why you are using '.col-sm-3' class of bootstrap if you don't want to use its properties and now answer to your question 'float:left' property of '.col-sm-3' is messing it up. Simply, overwrite it and problem will get resolved.
.c {
float:none;
}
Or remove col-sm-3 from HTML
That't it :)
solution2
1 2015-08-17 09:20:43
Give white-space: nowrap for .c :
.c {
white-space: nowrap
}
solution3
1 2015-08-17 09:22:38
我增加了容器的高度，对我有用！
solution4
1 2015-08-17 09:33:27
its not possible through css, use jquery, find children width and apply it
var width = 0;
$('.c').each(function() {
width += $(this).outerWidth( true );
});
$('.horizontal-scroll').css('width', width+100);
DEMO
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.