css - 水平スクロールバーを使って画像を表示する

Question

固定幅divの内側に多数の画像を水平に表示しようとしています。私はdiv内に収まらない画像を表示するために水平スクロールバーを使用したいと思います。

ただし、画像は水平ではなく垂直に表示されます。それらを強制的に並べて表示する方法はありますか？

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

あなたはインラインリストの項目を表示する必要がありますかそれらを浮遊し、ULに次の行に移動するアイテムを避けるために、非常に大きな幅を与える：

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

Answer 2

私はli要素はブロック要素としてレンダリングされていないことを確認するには

div#lasteventimg ul li { 
    display: inline; 
} 

で行くと思います。

Answer 3

まず、スタイルを#eventから#lasteventimgに変更する必要があります。あなたがulのwidthは、すべての画像を収容するのに十分な幅広に設定されている場合次に、あなたが取得しようとしている動作を確認する必要があります

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

要素がデフォルト垂直ではなく、その後水平にレンダリングされているので、あなたは、あなたのリストを変更する必要があります。

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

Answer 5

どうすればよろしいですか？

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

li 
{ 
    display: block; 
    float:left; 
} 

あなたは、UL幅がわからない場合

Answer 6

画像の任意の数のための正しいコード、：

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