Heim > Web-Frontend > CSS-Tutorial > Zwei Möglichkeiten, horizontale Bildlaufleisten in CSS zu implementieren (Codebeispiele)

Zwei Möglichkeiten, horizontale Bildlaufleisten in CSS zu implementieren (Codebeispiele)

青灯夜游
Freigeben: 2018-09-11 17:53:28
Original
8055 Leute haben es durchsucht

In diesem Kapitel werden Ihnen zwei Möglichkeiten vorgestellt, horizontale Bildlaufleisten mithilfe von CSS zu implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

HTML-Code:

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">全部</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>
Nach dem Login kopieren

1. Original-CSS + JQuery zur Implementierung der horizontalen Bildlaufleiste (native JS können implementiert werden, der Einfachheit halber wird jQuery verwendet)

CSS-Code:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}
Nach dem Login kopieren

JS-Code:

$(function(){
    var width = 0;
    for (let i = 0; i < $(&#39;.nav_item&#39;).length; i++) {
        width += $(&#39;.nav_item&#39;).eq(i).outerWidth(true);
    }
    $(&#39;.nav_mine&#39;).width(width+20);  //width只是内容的宽度,需要加上padding的宽度
})
Nach dem Login kopieren

PS: Warum js verwenden, weil ich nicht weiß, wie viele Tabs es gibt, also kann ich es nicht Wenn ich die Breite zu Tode schreibe, kann ich nur die Breite der Tabulatoren dynamisch ermitteln und sie dann addieren, um die Gesamtbreite zu erhalten, was für mehrere Zwecke praktisch ist. Der Parameter „outerWidth“ plus „true“ stellt die Breite einschließlich Abstand + Rand + Rand dar.

Zweiter CSS3 – Flex

CSS-Code:

* {
    box-sizing: border-box;
}

.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}
Nach dem Login kopieren

Für Leerzeichen verwendet das Element kein Leerzeichen. Bei der Verwendung von space:nowrap habe ich ein Problem festgestellt, bei dem ein Wort nicht umgebrochen wird, aber ich denke, dass es mit display:flex zusammenhängt basiert auf Leerzeichen. Um zu erkennen, ob ein Wort umbrochen werden soll, wird er als Zeichen behandelt. Daher muss „white-space:nowrap“ sowohl für chinesische als auch für englische Zeichen auf „Kein Umbruch“ eingestellt sein. Da die Unterschiede zwischen chinesischen und englischen Schriftzeichen zu inkonsistenten Breiten führen, sollten 1 bis 2 Pixel übrig bleiben.

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, horizontale Bildlaufleisten in CSS zu implementieren (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage