Espace horizontal sauf si retour à la ligne

Bonjour à tous,

Je me heurte à un problème de taille. J'ai une suite div en inline-block dans une page. Je cherche à les espacer de 10px horizontalement sauf le dernier de la liste.

Si je fais un margin-right:10px; le dernier a aussi sa marge et n'est donc pas aligné sur le bord de la page.

Si je fais un margin-left:10px; appliqué sur div + div ça se passe bien sauf si pour une raison de place le navigateur fait passer certain div sur la ligne d'en dessus (page fluide).

Comment s'en sortir svp ?

Je vous ai fais un petit jsfiddle qui montre le pb : http://jsfiddle.net/jmcollin92/uUEE8/3/


Merci d'avance.
Modifié par jmcollin92 (03 Mar 2013 - 12:26)

Bonjour et bienvenue,

Tout d'abord, il ne faut pas oublier le whitespace qui apparaît avec les inline-blocks : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Mais de toute façon, la réponse à ta question est ardue.

Je vois deux possibilités :
- tu connais exactement le nombre d'éléments dans chaque ligne. Dans ce cas, tu peux les cibler à l'aide d'un sélecteur :nth-child, par exemple :nth-child(3n+1) qui va cibler le 1er, le 4è, le 7è, etc.
- tu ne connais pas le nombre d'éléments dans la ligne et je pense qu'il faut passer par un positionnement complexe de type Flexbox ou alors carrément passer par JavaScript.

Bonne chance
Modifié par Raphael (03 Mar 2013 - 12:30)

L'excellent article sur les espaces indesirables m'a fait trouver la solution :
utiliser un : word-spacing : 30px; à la place des margin sur le conteneur parent.
C'est tout simple et ça marche avec FF, IE et Chrome.

Pour ceux que ça intéresse voici le code final : http://jsfiddle.net/jmcollin92/uUEE8/5/

Merci pour l'aide.

Du coup, je viens d'essayer et un word-spacing : -4px; permet de résoudre la difficulté discutée dans l'article sur les espaces indésirables.
Et hop un autre test : http://jsfiddle.net/jmcollin92/uUEE8/6/

jmcollin92 a écrit :
Du coup, je viens d'essayer et un word-spacing : -4px; permet de résoudre la difficulté discutée dans l'article sur les espaces indésirables.

Oui mais comme le précise l'article, la valeur de -4px est aléatoire et dépend de la taille de police et du type de fonte

jmcollin92 a écrit :
utiliser un : word-spacing : 30px; à la place des margin sur le conteneur parent.
C'est tout simple et ça marche avec FF, IE et Chrome.

Pour ceux que ça intéresse voici le code final : http://jsfiddle.net/jmcollin92/uUEE8/5/

Merci pour l'aide.

ça c'est pas idiot, tiens ! Bien joué

EDIT : faut juste penser à rétablir une valeur de word-spacing normale sur les enfants
Modifié par Raphael (03 Mar 2013 - 18:11)

Raphael a écrit :

ça c'est pas idiot, tiens ! Bien joué

EDIT : faut juste penser à rétablir une valeur de word-spacing normale sur les enfants

Ah oui tiens, tu pourrais presque le rajouter à ton tuto