[Résolu] Liste et alignement

Bonjour,

Je vous joins un shoot image pour illustrer ma problématique.
J'ai une liste de produits générée automatiquement qui doit se coller à gauche et à droite de la colonne principale.
Les marges sont donc entre les produits sauf à gauche du 1er produit et à droite du 4ème de chaque ligne.
La solution toute simple ne peut donc pas marcher.

.productList {
  margin: 0 6px;
}

Je pense à l'utilisation de la pseudo-classe "X:nth-child(n)" qui n'est malheureusement pas compatible avec ie7-ie8.

Avec vous une idée / solution ou lu une article sur le sujet ?

Par avance merci,

Luciole.

Salut,

éternel dilemme.

La solution la plus simple (pas la plus propre) consiste à mettre ton ul dans un div en overflow hidden. Ton ul étant plus large que ta div (de 12px).

Ensuite tu mets les marges sur tes li exclusivement à droite (0 12px 0 0). Ainsi ta marge "en trop" sera rognée par la div en overflow.

Par contre, si quelqu'un a mieux, sans js et sans classes, je suis aussi à l'écoute.

Ju

Hello,

Une solution simple et efficace et d'appliquer une marge négative sur ton container, de la largeur de tes gouttières.

Beaucoup de systèmes de grilles, dont celui de Bootstrap fonctionnent de la sorte.

Merci, je vais essayer !

Florian_R a écrit :
Hello,

Une solution simple et efficace et d'appliquer une marge négative sur ton container, de la largeur de tes gouttières.

Beaucoup de systèmes de grilles, dont celui de Bootstrap fonctionnent de la sorte.

Aurais-tu un exemple stp ? Je n'arrive pas à reproduire.

Par avance, merci !

Si tu regarde la grille de Bootstrap, tu verras que .row a un margin-left de -30px, qui correspond au 30px de margin-left sur chaque spanX.

Ok, j'ai compris, merci Florian.

Post résolu.