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

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>

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;
}

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的宽度
})

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;
}

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!