css - Wyświetlanie obrazów z poziomym paskiem przewijania

Question

Próbuję wyświetlić liczbę obrazów w poziomie w pionie o stałej szerokości. Chciałbym użyć poziomego paska przewijania, aby wyświetlić obrazy, które nie mieszczą się wewnątrz elementu div.

Obrazy są jednak wyświetlane w pionie, a nie w poziomie. Czy istnieje sposób zmuszenia ich do wyświetlania obok siebie?

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> 

Answer 1

Będziesz musiał wyświetlić listę elementów inline lub unoszą je i dać ul bardzo dużej szerokości, aby uniknąć elementów ruchomych do następnego wiersza:

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

Answer 2

pójdę z

div#lasteventimg ul li { 
    display: inline; 
} 

Aby upewnić się, że li elementy nie są renderowane jako elementy blokowe.

Answer 3

Przede wszystkim należy zmienić styl z #event na #lasteventimg. Następnie, jeśli ustawić width z ul być na tyle szeroki, aby pomieścić wszystkie obrazy, powinien pojawić się zachowania, które próbujesz dostać:

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>  

Answer 4

Musisz zmienić swoją listę, więc elementy są renderowane poziomo, a następnie domyślną pionową.

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

Answer 5

Dlaczego nie spróbujesz tego?

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

li 
{ 
    display: block; 
    float:left; 
} 

Answer 6

kod Poprawnie dla dowolnej liczby obrazów, jeśli nie wiem, szerokość UL:

#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>