Scroll list items horizontally in container

Not sure how to go about this. I have a containing div that is a set width and height. Within that div I have a list of blocks that I need to scroll horizontally within the containing div. There could be 1 block or there could be 20. There's no telling. At the moment the only way I can do this is by giving the UL a width but the problem with that there's obviously a lot of white space to scroll when you only have a few blocks. I would like to give that "auto" so the scroll bar either appears or doesn't and only scrolls the actual amount of blocks. The code might make more sense!


<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <style type="text/css">
 .container {
 width: 200px;
 overflow-y: scroll;
 height: auto;
 }
 
 ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 width: 2000px;
 }
 
 ul li {
 width: 50px;
 height: 50px;
 float: left;
 margin: 1px;
 padding: 5px;
 background: #555;
 color: #fff;
 }
 </style>
</head>
<body class="">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>

Any ideas or help would be greatly appreciated.

<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> ul { width: 300px; height: auto; overflow: auto; overflow-y: hidden; white-space: nowrap; list-style-type: none; margin: 0; padding: 0; } ul li { width: 50px; height: 50px; margin: 1px; padding: 5px; display: inline-block; background: red; } </style> </head> <body class=""> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>

Scroll list items horizontally in container

greencode

not2easy

lucy24

greencode

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week