Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)

Dieser Artikel stellt Ihnen das reine CSS-Handbuch vor (Bildlaufleiste ausblenden). Ich hoffe, dass es für Freunde hilfreich ist.

HTML:

<p class="bigder">
　　<p class="big">

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)" ></dt>

　　　　</dl>

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)" ></dt>

　　　　</dl>

　　</p>
</p>

CSS:

.bigder{width: 100%;margin: 0 auto;height: 195px;overflow: hidden;}
.big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}
.bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}
.bigder dl:last-child{padding-right: 0;}

Solange die Breite das übergeordnete Element überschreitet, kann es verschoben werden besteht darin, die Bildlaufleiste und die äußerste Ebene auszublenden. Sowohl die zweite Ebene als auch die zweite Ebene müssen eine feste Höhe haben. Dann ist die äußere Ebene etwas höher als die innere Ebene, die Bildlaufleiste befindet sich unten und dann die äußerste Ebene Ebenenüberlauf: versteckt; das war's

Vergleichsbild:

Vorher:

, Nachher

:

Tatsächlich gibt es einige einfache Methoden, aber sie sind nur auf den -webkit-Kernel beschränkt. Ja, Browser, die C3 unterstützen:

1)::-webkit-scrollbar {/*hide Scrollrad*/Anzeige: keine;

Außerdem, da wir über das Ausblenden von Bildlaufleisten sprechen, möchte ich noch mehr sagen: Ionic verbirgt Bildlaufleisten:

Fügen Sie overflow-scroll="true" zu ion-content und style="overflow hinzu :auto;“ und das war's!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

CSS-Video-Tutorial

!

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonReines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!