Frage Scrollen auf Y-Achse verbieten

[TimoW]

Hallo, ich habe eine kleine Scrollbar mit Bildern drin, wo man nur auf der X-Achse scrollen soll. Auf der X-Achse kann man momentan auch scrollen, jedoch aber auch ein paar Pixel nach unten, was nicht so sein soll.

        <div style="width: 70.9%; height: 140px; border: 3px solid black; white-space: nowrap; overflow-x: auto; overflow-y: none;">
            <a href="https://www.youtube.com/watch?v=ZR8D_OugGiw"><img src="Grafiken/Last1.png" width="250px" height="140px"/></a>
        <img src="Grafiken/Last2.png" width="250px" height="140px"/>
        <img src="Grafiken/Last3.png" width="250px" height="140px"/>
        <img src="Grafiken/Last4.png" width="250px" height="140px"/>
        <img src="Grafiken/Last1.png" width="250px" height="140px"/>
        <img src="Grafiken/Last1.png" width="250px" height="140px"/>
        </div>

Danke!

 

[SpiceLab]

overflow-y:none gibt's nicht, sondern overflow-y:hidden.

a,img {float:left}

Sollte das Problem aber von selbst lösen.

 

[TimoW]

overflow-y:none gibt's nicht, sondern overflow-y:hidden.

a,img {float:left}

Sollte das Problem aber von selbst lösen.

Ach, doch so einfach. ;) Vielen Dank!

 

[TimoW]

Noch eine kurze Zwischenfrage: Zwischen den Bildern ist immer ein weißer Rand. Wie kann man den ändern oder verschwinden lassen?

 

[SpiceLab]

Noch eine kurze Zwischenfrage: Zwischen den Bildern ist immer ein weißer Rand. Wie kann man den ändern oder verschwinden lassen?

Der sollte mit float:left verschwunden sein. Oder gibt's da vllt. eine weitere CSS-Formatierung, von der wir nichts wissen?

 

[TimoW]

Der sollte mit float:left verschwunden sein. Oder gibt's da vllt. eine weitere CSS-Formatierung, von der wir nichts wissen?

Nein, gibt es nicht. float: left verschiebt nur die ganze Scrollbar nach links.

 

[SpiceLab]

float: left verschiebt nur die ganze Scrollbar nach links.

Was hat nun die Scrollbar mit den Bildabständen zu tun? Nach links verschoben?

Bitte mal auf https://jsfiddle.net/ demonstrieren

 

[TimoW]

Was hat nun die Scrollbar mit den Bildabständen zu tun? Nach links verschoben?

Bitte mal auf https://jsfiddle.net/ demonstrieren

https://jsfiddle.net/Timowo/cL2msxow/

 

[SpiceLab]

float:left war auch nicht für <div> bestimmt. Das erklärt, warum die Box (nicht die Scrollbar!) nach links wandert.

Kleine Kursänderung: Wir nutzen nun display:flex für <div> und display:list-item für <a>.

https://jsfiddle.net/spicelab/kb9w9y31/

 

[threadi]

Den White-Space zwischen den Bildern kriegt man auch mit

font-size: 0;

beim umgebenden Element weg.

 

[SpiceLab]

Den White-Space zwischen den Bildern kriegt man auch mit

font-size: 0;

beim umgebenden Element weg.

Oder so, wenn nicht zwischendurch noch eine Textpassage auftauchen soll, die dadurch unterdrückt wird