CODEWITHSUNDEEP
htmlcss
Smeegs
Smeegs

Reputation: 9224

How I keep a horizontal unordered list from breaking?

I'm trying to create a list of thumbnails that I can scroll horizontally, but it breaks no matter what I do.

This is what I have now

http://jsfiddle.net/EXCf3/

ul{
    width: 100%;
     list-style-type: none;
    margin: auto;
    overflow-x: scroll;
}
li{
    height: 100px;
    width: 100px;
    border: 1px solid red;
    display: inline-block;

}

Any ideas on what I'm doing wrong? Thanks!

Upvotes: 15

Views: 21406

Answers (2)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Add white-space: nowrap on the ul:

ul {
    width: 100%;
    list-style-type: none;
    margin: auto;
    overflow-x: scroll;
    white-space: nowrap;
}

Demonstration.

Explanation:

I used the white-space property because it gives me the potential to handle what to do with the white space left in the object so I said it to make no wrap of that white space occuring the ul and display all of them in one line.

Upvotes: 34

Hafiz Mohammed
Hafiz Mohammed

Reputation: 141

use nowrap

ul {

white-space: nowrap;
width: 100%;
list-style-type: none;
margin: auto;
overflow-x: scroll;

   }

Upvotes: 1

Related Questions