CODEWITHSUNDEEP
htmlcss
xarion
xarion

Reputation: 470

Single line scrolling HTML list

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

Upvotes: 0

Views: 2874

Answers (2)

Scriptor
Scriptor

Reputation: 1125

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;
}

Upvotes: 0

ralgh
ralgh

Reputation: 331

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;
}
​

Upvotes: 1

Related Questions