[CSS] boite horizontale défilable [Résolu/Fermé]

Signaler
Messages postés
1150
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
-
pols12
Messages postés
1150
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
-
Bonjour !

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

<ul>

  <li><figure><a>
    <img>
    <figcaption></figcaption>
  </a></figure></li>

  <li><figure><a>
    <img>
    <figcaption></figcaption>
  </a></figure></li>

<!-- etc. -->
</ul>


Je n'arrive à rien. :(
Merci !

Pols12

3 réponses

Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
965
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;
}
Messages postés
1150
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
80
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.
<div class="scrollable">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>


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 !
le hollandais volant
Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
965
Reprends ma solution et ajoutes un "white-space: nowrap;" sur le UL, puis un "white-space: normal" sur le LI.

Ceci va empêcher les LI de retourner à la ligne et les forcer à rester.

Exemple là : http://lehollandaisvolant.net/tout/examples/hscroll.html
Messages postés
1150
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
80
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 !!!