Boutons avec défilement horizontal dans la disposition en mosaïque-Questions et réponses sur le réseau chinois PHP

Article Sujet apprentissage Télécharger Questions et réponses Dictionnaire de programmation Jeu mises à jour récentes

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Boutons avec défilement horizontal dans la disposition en mosaïque

P粉823268006

P粉823268006 2023-08-31 20:54:51

0

2

551

<p>J'ai beaucoup de boutons qui défilent verticalement dans une disposition en mosaïque, comme ceci : </p> <p> <pre class="brush:html;toolbar:false;"><style> .tile-bouton { largeur : 33,3 % ; hauteur : 100 px ; couleur de fond : bleu clair ; bordure : gris uni de 1 px ; espace blanc : normal ; mariage : 0px ; } </style> <body style="marge : 0;"> <div style="width:100%;height:300px;background-color: corail;overflow-y: scroll;font-size:0px;"> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <button class="tile-button">title</button> <div> </corps></pré> </p> <p>Maintenant, je dois faire la même chose, mais uniquement avec un défilement horizontal. Quelqu'un peut-il m'aider? Merci beaucoup</p>

P粉823268006

P粉823268006

répondre à tous(2)

P粉060528326

P粉0605283262023-09-01 14:46:59 2 plancher

Ajoutez simplement ce code CSS 'white-space:nowrap;' dans le conteneur DIV.

<div style="width:100%;height:300px;background-color: coral;overflow-y: scroll;font-size:0px;white-space:nowrap; ">

Comme +0

Ajouter une réponse

P粉156415696

P粉1564156962023-09-01 10:50:41 1 plancher

J'ai trouvé la solution :

<style>
/* webkit, per chrome, edge, safari */
::-webkit-scrollbar {
    height: 12px;
    width: 5px;
    background: #aaa;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

/* per firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #393812 #aaa;
}

.container {
  width: 100%; 
  height: 300px; 
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: hidden;
  font-size:0px;
}

.inner {
  height: 100%;
  white-space:nowrap; 
}

.floatLeft {
  width: 150px;
  margin:0px; 
  display: inline-block;
}

button {
  height: 94px;
  width: 150px;
  margin: 0px;
  border: solid 1px gray;
}
</style>

<div class="container custom-scrollbar">
   <div class="inner">
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
   </div>
</div>

Comme +0

Ajouter une réponse

Sujets populaires

Plus>

Articles populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

À propos de nous Clause de non-responsabilité Sitemap: Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！