[ERLEDIGT] icon scrollbar nur eine Zeile

[KunmingDirk]

Hallo,
Ich brauche wiedermal eure Hilfe.

Ich programmiere gerade mein erste slideshow.

hierfür möchte ich
in einer flachen , in der Breite und Höhe begrenzten, div
viele icons in NUR einer Zeile darstellen ,
und weil die div begrenzt ist und es sehr viele icons sind
soll man horizontal scrollen können.

Mein Problem ist,
das ich es nicht schaffe, das es nur eine Zeile bleibt.

hier ein Auszug aus meinem Fehlversuch:

<style>
#slidebar img 
{
float:left;
margin:2px;
vertical-align:middle;
}
</style>

<div id="slidebar" style="height:110px;width:400px;
overflow-x:scroll;overflow-y:hidden;
border-style:solid;border-width:1px;border-color:black; " >

<img src="./pictures/before-after 6 beers rotated-icon.jpg" style="" alt="">
<img src="./pictures/all03-icon.png" style="" alt="">
<img src="./pictures/eyesonly-cut-wide-icon.png" style="" alt="">
<img src="./pictures/KunmingD-oval-01a-icon.png" style="" alt="">
<img src="./pictures/image-50062-galleryV9-ogdh-icon.jpg" style="" alt="">
<img src="./pictures/image-446540-galleryV9-iodm-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">

</div>

Cheers,
Dirk

 

[scbawik]

<div id="slidebar" style="height:110px;width:400px;overflow-x:scroll;overflow-y:hidden;border-style:solid;border-width:1px;border-color:black;white-space:nowrap " ><img src="./pictures/before-after 6 beers rotated-icon.jpg" style="" alt=""><img src="./pictures/all03-icon.png" style="" alt=""><img src="./pictures/eyesonly-cut-wide-icon.png" style="" alt=""><img src="./pictures/KunmingD-oval-01a-icon.png" style="" alt=""><img src="./pictures/image-50062-galleryV9-ogdh-icon.jpg" style="" alt=""><img src="./pictures/image-446540-galleryV9-iodm-icon.jpg" style="" alt=""><img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt=""><img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt=""><img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt=""><img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt=""></div>

Bin mir jetzt nicht sicher ob es nötig ist, aber ich habe bewusst keine Leerzeichen zwischen den Bildern gelassen.

Sollte so klappen.
white-space: Textumbruch: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[KunmingDirk]

Danke für die Hilfe,

"float:left" raus
und
"white-space:nowrap;" ins style von der div


Es klappt!

nochmals Danke,
Dirk

PS:
man muss nicht alles in eine Zeile schreiben
ich habe jedes <img> in eine neue Zeile geschrieben
aber auch alle blanks weggelassen (wohl auch unnoetig;-))