Défilement horizontal liste des images
Je suis en train de créer un défilement horizontal de la liste. Je vais la remplacer par une fantaisie de version lorsque Javascript est activé, mais je veux le balisage et css pour l'apparence et le fonctionnement de l'amende sans Javascript raisonnablement les navigateurs modernes (toutes les suggestions qui utilise du Javascript est désactivé).
Mon balisage/css à l'œuvre, mais voici ce que je n'aime pas:
- Le marquage en cours de spécifier une très large ul (c-10000px) et un conteneur qui permet de faire défiler sur cette. Est-il un moyen pour éviter cela et au contraire, la largeur se développe en fonction de son contenu (c'est à dire le bleu de l'arrière-plan ne devrait pas être là)?
- Il y a deux étrangers
div
s (ceux avec l'id#extra1
,#extra2
) c'est juste pour le style de but. Est-il un moyen d'éliminer ce surplus de div? - Si il n'y a pas assez d'image pour remplir la largeur de la page, la barre de défilement doit s'effondrer, mais actuellement ce n'est pas parce que j'ai une très large ul qui ne peut pas s'effondrer.
- La
<a>
tag sont séparés par la liste horizontale, de préférence, je veux les garder ensemble. Est-il un moyen de les avoir rapprochés et proprement les séparer en CSS?
De côté, connaissez-vous des tutoriels qui traitent de ce genre de chose? J'ai vu plusieurs tutoriels qui ont démontré avoir l'ensemble de la page pour faire défiler, et j'ai pris quelques idées de ceux-ci, mais je ne trouve pas que démontré défilement ul/ol élément.
Infos supplémentaires qui pourraient vous aider:
- La largeur de la page est statique (c'est-à - pas fluide et élastique de mise en page).
- Les images de la page est généré dynamiquement à partir de PHP, et le nombre d'images peut changer.
- La largeur des vignettes sont bien définis.
Dépouillé live exemple: http://dl.dropbox.com/u/17261360/horiz.html
Vous devez vous connecter pour publier un commentaire.
Mise à jour (2018): La solution originale basée sur
display: inline
est de plus de 7 ans maintenant. Dans le monde d'aujourd'hui, je vous recommande la flexbox approche, car il vous donne le plein contrôle sur les écarts qui apparaissent entre les images.À l'aide de flexbox
Vérifier compatibilité du navigateur en premier (vous êtes probablement très bien), et ajouter des préfixes en tant que de besoin.
CSS:
HTML:
À l'aide de
display: inline
Cela fonctionne pour moi, testé dans Firefox 4 beta 10, serait conseillé de le tester dans IE ainsi:
CSS:
HTML:
Le truc dans le CSS est de définir la
li
s àdisplay: inline
, de sorte qu'ils sont considérés comme des caractères et placés les uns à côté des autres, et de définirwhite-space:nowrap
sur leul
de sorte qu'aucune coupure de ligne est fait. Vous ne pouvez pas spécifier une taille sur des éléments en ligne, mais ils vont être étirés pour s'adapter à laimg
éléments à l'intérieur d'eux. Le scrolling est alors simplementoverflow-x: auto
sur le parentul
élément.Ajoutant prev/next boutons qui pourrait être fait avec
position:absolute
, ou avecfloat:left
, ou tout autre méthode que vous avez envie.À l'aide de
display: inline-block
Similaire à l'approche précédente, mais ce qui nous permet de définir une taille de chaque bloc d'images:
CSS:
HTML:
<li>
dans une seule ligne (ou de faire pire hacks) depuis dans inline/inline-block les espaces sont importants; ce qui a totalement ruines de la lisibilité du code HTML (je ne veux pas compromettre la sémantique et la lisibilité d'un mécanisme de secours).inline-block
n'est pas bien pris en charge sur IE.width: 900px;
dansul.images
. Mon conteneur est fluide. Il travaillera Si je100%
..?