css - 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幅がわからない場合は、任意の数の画像のコードを修正してください。

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

Answer 2

リスト項目をインラインで表示するかフロートさせて、項目が次の行に移動しないように ul に非常に大きな幅を与える必要があります。

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

Answer 3

私は一緒に行きます

div#lasteventimg ul li {
  display: inline;
}

li要素がブロック要素としてレンダリングされないようにするため。

Answer 4

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

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 5

これを試してみませんか？

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

li 
{
   display: block;
   float:left;
}

Answer 6

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

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