Liste à puce coupée en deux [Résolu]

Bonjour à tous,

Dans le cadre du développement d'un des modules de mon site internet, je dois utiliser des listes qui contiennent des images. Comme dans l'image jointe au présent sujet.

En fait, il s'agit de ceci :

<ul>
<li>< IMAGE 1 />< IMAGE 2 /></li>
<li>< IMAGE 1 />< IMAGE 2 /></li>
<li>< IMAGE 1 />< IMAGE 2 /></li>
</ul>

"IMAGE 1" correspondant à la page de gauche, et "IMAGE 2" à la page de droite. Le soucis est que lorsque je suis en "text-align: left", arrivé en bout de fenêtre navigateur, il me descend naturellement la prochaine image à la ligne suivante. Même si je suis entre l'image 1 et 2, me coupant donc ma page. L'image jointe est claire, je pense que vous comprendrez le soucis.

Y a t-il une solution propre, ou un attribut, en CSS, permettant de contourner ce problème ?
Merci d'avance
Modifié par Gaylord.P (26 Nov 2011 - 14:39)

Bonjour,

Plusieurs solutions:

1. LI en float:left avec une largeur fixe (correspondant à la largeur des deux images).
2. LI en display:inline-block avec une largeur fixe.
3. LI en display:inline avec un white-space:nowrap.

Et j'en oublie sans doute.

Merci beaucoup pour tes solutions
Les deux premières semblent difficile, car la largeur est aléatoire. La dernière, j'avais déjà essayé, mais tous les LI se retrouvent aligné horizontalement, sur une seule ligne, et sortent donc inévitablement du bloc. =S

J'ai mis tous les LI en float:left, sans largeur fixe, et ça me semble fonctionnel

Merci beaucoup