Single line scrolling HTML list

Question

Using a list as;

<ul id="scroller">
    <li><img src="../static/image/brand1.png" title="brand title"></li>
    .....
</ul>

And with css properties;

    ul#scroller li {
        list-style: none;
        display: inline;
    }

    ul#scroller li img{
        margin-left: 75px;
        float:left;
    }

    ul#scroller {
        overflow: scroll;
    }

and the YUI CSS reset just before this definition.

The problem is; instead of the horizontal scroll, my list items are line breaking.

Peace

You mean like here, where you might get two rows of Beaker? jsfiddle.net/userdude/YMDCw — Jared Farrish
– Jared Farrish, Commented Apr 7, 2012 at 22:06
exactly, just add a couple more list items. they need to overflow 'horizontally' but they are linebreaking.. — xarion
– xarion, Commented Apr 7, 2012 at 22:10
i would actually try setting float: left directly in the li, though I cannot see obvious reason for this :) — mkk
– mkk, Commented Apr 7, 2012 at 22:24

ralgh · Accepted Answer · 2012-04-07 22:24:35Z

1

You can add "white-space:nowrap;" to the ul#scroller element.

http://jsfiddle.net/YMDCw/7/

ul#scroller{
    white-space:nowrap;
}
ul#scroller li {
    list-style: none;
    display: inline;
}

ul#scroller li img{
    margin-left: 75px;
}

ul#scroller {
    overflow: scroll;
}

answered Apr 7, 2012 at 22:24

ralgh

3313 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Starx Over a year ago

@xatanian, Forcing the element not to wrap, isn't the perfect way

Scriptor · Accepted Answer · 2012-04-07 22:38:11Z

0

I think you want the css like this?

ul {
    height: 150px;
    width: 300px;
    overflow: auto;
    overflow-y: hidden !important;
    overflow-x: scroll !important;
}

li {
    list-style: none;
    min-width: 800px;
}

img {
    list-style: none;
    display: inline-block;
    float: left !important;
}

answered Apr 7, 2012 at 22:38

Scriptor

1,1351 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Single line scrolling HTML list

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related