web-dev-qa-db-fra.com

comment forcer le défilement horizontal dans une liste HTML en utilisant CSS?

J'ai une liste comme celle-ci:

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

et le CSS suivant:

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

J'essaie de forcer les éléments de la liste à s'afficher de gauche à droite, c'est-à-dire

 one - two - three - four

Mon problème:
Le faire comme ça me donne deux rangées avec deux éléments chacune.

Question:
Existe-t-il un moyen CSS pour forcer tous les éléments de la liste à être sur une seule ligne afin que je puisse utiliser le défilement horizontal? En ce moment, si je définit overflow: auto Je ne reçois que des barres de défilement verticales, ce que je ne veux pas.

Je ne veux pas mettre cela sur le div enveloppant. Je suis simplement curieux de savoir s'il existe une solution CSS que je peux utiliser uniquement dans la liste.

Merci pour l'aide!

htmlcsshtml-listscss-floathorizontal-scrolling
21
frequent

Vous ne pouvez pas vraiment faire défiler le contenu flottant. Une fois flotté, il n'est pas calculé par défaut dans la largeur ou la hauteur du conteneur parent. Vraiment le <ul> se développe simplement à sa largeur définie et ne fait rien d'autre.

Suppression du float: left les fera défiler. Le seul problème que vous aurez alors est qu'il y a un "espace" supplémentaire entre chaque bloc en ligne. Vous pouvez supprimer cela en supprimant les sauts de ligne entre chaque élément de la liste. Ce n'est pas la plus jolie chose. Normalement, j'utiliserais un font-size: 0, puis réinitialisez la taille de police dans l'élément de liste.

Vous devez également vous assurer que les éléments ne passent pas à une nouvelle ligne lorsqu'ils atteignent la largeur de l'élément.

Exemples jsFiddle:

53
animuson

Voici un violon qui fonctionne: http://jsfiddle.net/qnYb5/

CSS pertinent: 

ul{
    list-style-type:none;
    white-space:nowrap;
    overflow-x:auto;
}

li{
    display:inline;
}
34
MetalFrog

Vous n'avez pas limité la hauteur du <ul>, le navigateur est donc libre d'envelopper les éléments "supplémentaires" sur sa propre ligne. Vous aurez besoin d'un height: 1em ou autre chose pour vous assurer que le <ul> ne peut pas devenir plus grand, forçant tout à défiler horizontalement.

2
Marc B

Utilisation overflow-x: scroll; sur la div.

Jouez avec lui ici .

1
Krazer

Vous pouvez le faire avec css + javascript, par exemple (http://www.smoothdivscroll.com/v1-2.htm). Ne pensez pas qu'il existe une solution CSS uniquement (qui fonctionnera entre plusieurs navigateurs).

1
daker