How to Force Horizontal Scrolling in an HTML List Using CSS

how to force horizontal scrolling in an HTML list using CSS?

You can't really scroll floated content. Once it's floated, it's not calculated in the width or height of the parent container by default. Really the <ul> is just expanding to its set width and then not doing anything else.

Removing the float: left will make them scrollable. The only problem you'll have then is that there is the extra "space" between each inline-block. You can remove that by removing the line-breaks between each list item. It's not the prettiest thing. Normally I'd use a font-size: 0 and then reset the font-size in the list item.

You also need to make sure the items don't wrap to a new line when they hit the width of the element.

jsFiddle Examples:

• Removing line breaks
• Using font-size: 0

How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

if I understand well you want all li elements to stay in one line. put this in your css

.imageGallery ul{
    white-space: nowrap
} 
.imageGallery li{ 
    display:inline-block 
}

CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

Wrap the table in a div and set everything there.

<div id="tableWrapper">
    <table id="myTable">
       <tr>
           ...
       </tr>
    </table>
</div>

Working JSFiddle: https://jsfiddle.net/h037abq3/24/

Trying to force a DIV to have a horizontal scrollbar via CSS

You can try the following css :

#slider  {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}

#thumbset {
width: 550px;// whatever width you want
}

How to force an HTML page to have a horizontal scrollbar

The CSS overflow property, specifies whether to clip content, render scrollbars, or just display content when it overflows its block level container.

Try adding the ID #scrollable to the element you want to force a scrollbar on and then

#scrollable{
    overflow: scroll;
    width: 100%;
}

From the MDN Docs

If you want to force overflow scroll in a single axis, you can use:

overflow-x: scroll;

or

overflow-y: scroll;

MDN Docs on overflow-x

Display horizontal scrollbar and force horizontal overflow in LI elements

Change

.tab {
  overflow: hidden;
}

to

.tab {
  overflow-x: scroll; /* or auto, if you don't want the scroll bar visible all of the time. */
  overflow-y: hidden;
}

If you find your stuff is still wrapping, you may need to add white-space: nowrap to your div.tabs, or the <li>s.

Additionally, your ul's position: absolute is likely going to interfere with what you want. position: absolute takes the element out of the document flow, so it may not behave the way you want it to. If you find that it is misbehaving, try changing it to position: relative.

How to force horizontal scrolling depending on size of contents

People have been here before and found the best / easiest way to do this. Look here:

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

force browser to add horizontal scroll bar?

Ahh, I'm such a noob. All I needed to do was add this to my scripts:

$(window).resize(function() {
if($(window).width() <= 1200)
    $("body").css("width","1200px");
else
$("body").css("width","100%");
});

This does exactly what I wanted it to do.

Thanks for your help guys.

---

Related Topics