CODEWITHSUNDEEP
cssscrolloverflow
Dan
Dan

Reputation: 1011

css - Displaying images with horizontal scroll bar

I'm trying to display a number of images horizontally inside of a fixed-width div. I would like to use a horizontal scroll bar to display the images which do not fit inside the div.

However, the images are displaying vertically, rather than horizontally. Is there a way to force them to display side-by-side?

div#event {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}

div#event ul { list-style: none; }

div#event img {
width: 100px;
float: left;
}

<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>

Upvotes: 11

Views: 43820

Answers (6)

Ramesh
Ramesh

Reputation: 629

Why don't you try this?

ul
{
   width: 10000px; 
   white-space: nowrap;
}

li 
{
   display: block;
   float:left;
}

Upvotes: 0

dneprforum
dneprforum

Reputation: 121

Correct code for arbitrary number of images, if you don't know ul width:

#lasteventimg {width:150px;overflow-x:scroll;overflow-y:hidden;}
ul {list-style:none; display:block;white-space:nowrap;}
li {width: 100px;display:inline;}


<div id="lasteventimg">
<ul>
<li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
<li><img src="./gfx/gallery/image4.jpg" /></li>
<li><img src="./gfx/gallery/image5.jpg" /></li>
</ul>
</div>

Upvotes: 12

Donut
Donut

Reputation: 112815

Well first of all, you need to change your styles from #event to #lasteventimg. Then, if you set the width of the ul to be wide enough to accommodate all the images, you should see the behavior that you're trying to get:

div#lasteventimg {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}

div#lasteventimg ul { list-style: none; width: 300px; }

div#lasteventimg img {
width: 100px;
float: left;
}

<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>

Upvotes: 1

Dominic Bou-Samra
Dominic Bou-Samra

Reputation: 15416

You need to change your list, so the elements are rendered horizontally rather then the default vertical.

#imagelist li
{
display: inline;
list-style-type: none;
}

Upvotes: 0

jeroen
jeroen

Reputation: 91734

You will have to display the list items inline or float them and give the ul a very large width to avoid items moving to the next line:

ul {
  width: 10000px;    // for example
  white-space: nowrap;
}
li {
  float: left:
  // or
  display: inline;
}

Upvotes: 9

Welbog
Welbog

Reputation: 60408

I'd go with 

div#lasteventimg ul li {
  display: inline;
}

To make sure the li elements aren't rendered as block elements.

Upvotes: 1

Related Questions