I have structure of :
#navBar {
height: 55px;
width: 40px;
overflow-x:scroll;
overflow-y:hidden;
}
<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
<div style="width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav1" />
<br />
<span style="font-size: 80%">Nav1</span>
</div>
<div style=" width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav2" />
<br />
<span style="font-size: 80%">Nav2</span>
</div>
<div style=" width: 80; float: left; text-align: center;">
<img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav3" />
<br />
<span style="font-size: 80%">Nav3</span>
</div>
</div>
I want that all of the inner div
s will scroll-x
and not break the line. How can I achieve that?
This will work:
<style type="text/css">
#navBar {
height: 55px;
width: 80px;
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
}
#navBar div {
display: inline-block;
}
</style>
and for HTML part:
<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
<div style="width: 100px; text-align: center; background-color: red;">
<img src="" alt="Nav1" />
<br />
<span style="font-size: 80%">Nav1</span>
</div>
<div style=" width: 100px; text-align: center;">
<img src="" alt="Nav2" />
<br />
<span style="font-size: 80%">Nav2</span>
</div>
<div style=" width: 100px; text-align: center; background-color: red;">
<img src="" alt="Nav3" />
<br />
<span style="font-size: 80%">Nav3</span>
</div>
</div>
No need for float: left;
CSS.
Add white-space: nowrap
to the #navBar and display: inline-block;
to the inner divs. I believe that should do it.
Take a look at this fiddle: http://jsfiddle.net/fzLwX/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With