[CSS] boite horizontale défilable

Résolu/Fermé

pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 - Modifié par pols12 le 11/12/2015 à 08:56
pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 - 17 déc. 2015 à 21:43

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

A voir également:

[CSS] boite horizontale défilable
Boite gmail saturée - Guide
Se connecter à ma boite hotmail - Guide
Boite a couleur - Télécharger - Divers Photo & Graphisme
Boîte mail française gratuite - Guide
Boite gmail bloquée - Guide

3 réponses

Réponse 1 / 3

le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
12 déc. 2015 à 19:54

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;
}

Réponse 2 / 3

pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
15 déc. 2015 à 18:24

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 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
17 déc. 2015 à 18:31

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à : https://lehollandaisvolant.net/tout/examples/hscroll.html

Réponse 3 / 3

pols12 Messages postés 1143 Date d'inscription lundi 22 mars 2010 Statut Membre Dernière intervention 31 juillet 2019 119
17 déc. 2015 à 21:43

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 !!!

Discussions similaires

comment avoir accès à ma boîte mail live.fr

trait horizontal avec du css