Comment intégrer cette grille ?

Bonsoir la communauté,

je suis face à un petit problème d'intégration d'une grille fluide...
ci joint une capture d'écran de ce à quoi ça devrait ressembler :



Voici mes contraintes :

1) Le 1er cercle et le dernier cercle doivent être collés au conteneur.
2) L'espace blanc doit être le même entre chaque cercle
3) une séparation (le trait) doit être présent pile au milieu de ces espaces blanc
4) utiliser une seule liste <ul><li></li></ul>

J'ai essayé en flexbox, notamment avec la propriété : "justify-content: space-between;" mais impossible de bien placer les traits dans les espaces blanc... Bref, si vous avez une solution je suis preneur ?

Jonathan

Moi je propose comme ça, j'ai laissé des couleurs bien dégueu pour bien comprendre

https://jsfiddle.net/acjmy5cy/2/

psykhe a écrit :
Bonsoir la communauté,
...
J'ai essayé en flexbox, notamment avec la propriété : "justify-content: space-between;" mais impossible de bien placer les traits dans les espaces blanc...

si ce n'est qu'avec des li, l'exercice peut être réaliser de cette façon avec justify-content justement http://codepen.io/anon/pen/BNyjYZ

Tu ne donnes pas assez d’éléments pour t'orienter :

psykhe a écrit :

Voici mes contraintes :

1) Le 1er cercle et le dernier cercle doivent être collés au conteneur.
2) L'espace blanc doit être le même entre chaque cercle
3) une séparation (le trait) doit être présent pile au milieu de ces espaces blanc
4) utiliser une seule liste &lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;

ou est donc ton CSS ? (erreur de syntaxe, incomplet, mauvais selecteur, etc ...)
ou est donc ton HTML ? ou bien c'est des li vides , vraiment ?