Menu
For some reason, I can't prevent the UL and it's LI's from wrapping. I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.
I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.
Does anyone know how to make a scrollbar come up without setting the UL's width?
HTML:
<div id="nav"> <ul id="navbuttons"> <li>Some text</li> <li>Some text</li> ... </ul> </div> CSS:
div#nav { height: 100px; width: 800px; margin-left: auto; margin-right: auto; } div#nav ul li { margin-right: 15px; float: left; font-size: 12px; list-style-type: none; } 
458
Is there any way to add the scroll bar for it? A: You can try to add the scroll bar for submenu manually. For this purpose you should open your page where you added the css3menu in any text editor and add class="scroll" into the <ul></ul> tag. You can also change the value of 'max-height' parameter.
Basic Horizontal Scroll Box To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.
Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
try this
ul { white-space:nowrap; } li { display:inline; } 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
