[CSS] boite horizontale défilable
Résolu
pols12
Messages postés
1143
Date d'inscription
Statut
Membre
Dernière intervention
-
pols12 Messages postés 1143 Date d'inscription Statut Membre Dernière intervention -
pols12 Messages postés 1143 Date d'inscription Statut Membre Dernière intervention -
Bonjour !
Je souhaiterais avoir une boite horizontale, hauteur 150px, défilable horizontalement.
D'un point de vue sémantique, c'est une liste <ul>.
Je n'arrive à rien. :(
Merci !
Pols12
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 pleine - Guide
- Se connecter à ma boite hotmail - Guide
- Boite gmail bloquée - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
- Ligne horizontale word - Guide
3 réponses
Salut,
Places les <LI> en ligne :
Et fais en sorte que la liste ait une largeur fixe et soit défillable :
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;
}
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.
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 !
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 !
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
Ceci va empêcher les LI de retourner à la ligne et les forcer à rester.
Exemple là : https://lehollandaisvolant.net/tout/examples/hscroll.html
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 :
MERCI !!!
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 !!!