[CSS] boite horizontale défilableRésolu/Fermé

Question

Bonjour ! Je souhaiterais avoir une boite horizontale, hauteur 150px, défilable horizontalement. D'un point de vue sémantique, c'est une liste

le hollandais volant · Answer

Salut,

Places les <LI> en ligne :
li {
    display: inline-block;
}

Et fais en sorte que la liste ait une largeur fixe et soit défillable :
ul {
    width: 400px;
    overflow: scroll;
}

pols12 · Answer

Le Hollandais volant : ta solution ne fonctionne pas. Les LI refusent de s'aligner en dépassant la largeur de UL. Systématiquement, ils retournent à la ligne dès que ça dépasse de la largeur fixé pour UL. J'ai trouvé cette solution qui fonctionne pas mal : mettre une DIV conteneur qui va avoir une largeur définie et être défilablle. Ainsi on donne une grosse largeur à UL, donc les LI s'alignent puisqu'ils ne dépassent pas de UL. Et ce dernier dépasse de la DIV qui est scrollable.

...
...

li { display: block; float: left; } ul { width: 150em; /* autrement dit une grande taille */ list-style: outside none none; /* reset de la liste */ } .scrollable{ overflow: auto; } Seule problème : on est obligé de fixer une taille à UL. Or, j'aimerais que la taille de UL soit adaptée au contenu de la liste, c'est à dire que ça soit la taille que font tous les LI alignés. Si quelqu'un a une solution, je suis preneur !

pols12 · Answer

C'est ça ! Parfait !
J'avais tenté de modifier white-space, mais lors de mes tests, mes li étaient en display:block float:left.

Je résume donc :

ul {
  overflow-x: scroll; /* ou overflow:auto; qui masque la barre si elle est inutile */
  white-space:nowrap;
}
li {
  display: inline-block;
  white-space: normal; /* pour empêcher l'héritage provenant de ul */
}
 

MERCI !!!

[CSS] boite horizontale défilable

3 réponses

Discussions similaires

Newsletters