Deux façons d'implémenter des barres de défilement horizontales en CSS (exemples de code)

Ce chapitre vous présente deux façons d'implémenter des barres de défilement horizontales à l'aide de CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Code HTML :

<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. CSS + jquery original pour implémenter une barre de défilement horizontale (js natif peut être implémenté, jQuery est utilisé pour plus de commodité)

code css :

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

code js :

$(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 : Pourquoi utiliser js car je ne sais pas combien d'onglets il y a et je ne peux pas les mettre. La largeur est codée en dur. Vous ne pouvez obtenir que dynamiquement la largeur des onglets, puis les additionner pour obtenir la largeur totale, ce qui est pratique pour de multiples utilisations. externalWidth plus le paramètre true représente la largeur, y compris padding+margin+border.

Deuxième CSS3 -- flex

Code CSS :

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

Pour les espaces blancs, l'élément est inutile Quand en utilisant white-space:nowrap, j'ai trouvé un problème lorsque la largeur n'est pas définie, un mot ne sera pas renvoyé, mais les caractères chinois seront liés à display:flex. J'ai vérifié en ligne et découvert : white-. space est Regardez les espaces pour déterminer s'il faut retourner à la ligne ou non. Un mot est traité comme un caractère, donc pour les caractères chinois et anglais, white-space:nowrap doit être défini pour empêcher le retour à la ligne. Étant donné que la différence entre les caractères chinois et les caractères anglais entraîne des largeurs incohérentes, il convient de laisser 1 à 2 pixels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!