[Résolu] Mise en forme de liste / ::before OU nouvelle ligne

Bonjour,

je cherche une solution (si elle existe) afin de réaliser la mise en forme suivante d'une liste:

<ul>
  <li>Jaune</li>
  <li>Bleu</li>
  <li>Vert</li>
  <li>Orange</li>
  <li>Bordeau</li>
  <li>Vert pomme</li>
  <li>Gris un peu mais pas trop</li>
  <li>Rose</li>
  <li>Blanc</li>
</ul>

s'afficherait:

Jaune * Bleu * Vert * Orange
    Bordeau * Vert pomme
  Gris un peu mais pas trop
       Rose * blanc
       
Ou dans une autre largeur:
       
Jaune * Bleu * Vert * Orange * Bordeau
Vert pomme * Gris un peu mais pas trop
            Rose * blanc

Autrement dit chaque élément de la liste en inline / inline-block, séparés par un caractère ou un saut à la ligne (mais pas les deux )

Je cherche une solution CSS uniquement (sinon je dirai NEIN au graphiste ), le séparateur étant un texte généré idéalement mais une image aussi pourquoi pas.

Toutes les idées sont les bienvenues.
Modifié par kustolovic (12 May 2017 - 08:48)

J'ai trouvé une solution/bricolage lorsque la ligne est alignée à gauche (ou à droite) mais pas lorsqu'elle est centrée…

https://codepen.io/anon/pen/rmJZbz

Bonsoir.

Avec tact, vous lui dites que ce n'est pas possible...

Sinon, j'ai une option qui le consolera peut-être : une petite moitié en background positionnée à gauche, une autre petite moitié en background positionnée à droite, entre deux éléments, les deux petites moitiés sont réunies... Ce n'est pas vilain.

kustolovic a écrit :

J'ai trouvé une solution sur Firefox & Chrome:

https://codepen.io/anon/pen/rmJZbz

à base de box-decoration-break: clone
Mais c'est très de la bricole.

Non ça m'a l'air bien, j'ai pas tout compris, ce n'est embêtant que si il y a des inconvénients...

Mon idée... qui peut servir de fallback.


Modifié par Zelena (11 May 2017 - 14:50)