web-dev-qa-db-fra.com

Overflow-x ne fonctionne pas

J'essaie d'implémenter un curseur pour ma galerie . Pour le moment, le CSS a un problème où overflow-x ne fonctionne pas correctement . (Je veux un curseur horizontal et aucun défilement vertical)

Voici le violon:

S'il vous plaît, jetez un oeil.

.testimg{
    height: 100%;
    width: 100%;
}
#testDiv{
    width: 400px;
    overflow: auto;
    float: left;
    overflow-y:hidden;
    border:1px solid black; 
}
.testimgdiv{
    width: 120px;
    height: 100px;
    float: left;
}
csscss3scroll
17
Nevin Madhukar K

Une fois que vous avez flotté les éléments, vous les avez supprimés du flux de documents et celui-ci ne sera pas calculé dans la largeur du parent. Vous devez utiliser une combinaison de display: inline-block sur les éléments au lieu de float, puis utiliser white-space: nowrap sur le parent.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap; 
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

Fiddle

Remarque: J'utilise font-size: 0 pour que les éléments apparaissent l'un à côté de l'autre.

31
davidpauljunior
#testDiv {
   border: 1px solid #FF0000;
   float: left;
   height: auto;
   overflow-x: auto;
   width: 400px;
}
0
Kisspa