Liste inline sur plusieurs lignes avec puce

Bonjour,
Je suis confronté à un petit casse tête en css.
Voilà, en gros j'ai une liste de plusieurs éléments (en fait beaucoup) qui sert de menu "secondaire".

Ce que je souhaiterais faire, c'est avoir tous les éléments côte à côte, séparés par un séparateur du type "un tiret", "un carré",... Mon problème, c'est que la liste prend plusieurs lignes, et du coup ce que je recherche c'est une manière d'avoir un séparateur entre chaque élément qui est sur la même ligne, et donc pas en fin de ligne.

Ce que je voudrais avoir en gros c'est ceci :

element - element - element - element - element - element - element
element - element - element - element - element - element - element
element - element - element - element - element - element - element
element - element - element - element - element - element - element

Le hic c'est que je n'y arrive pas... pour le moment j'arrive juste à mettre tous les éléments les uns derrière les autres grâce à la propriété "display: inline;" mais c'est tout... Impossible d'afficher la puce, et impossible de ne pas en afficher en fin de ligne.

Et évidement, le second hic c'est que je n'ai aucun moyen de savoir quel élément sera le dernier de chaque ligne.

Merci d'avance de vos idées et aide

Séb

Ouf, ce n'est pas super simple en effet.

Mais, puisqu'il ne te faut pas de puce en début de ligne... Peut-être que tu pourrais insérer tes tirets dans la liste:

<ul>
  <li>element</li>
  <li> - </li>
  <li>element</li>
</ul>

Ou sinon en intégrant une image dans ton <li>

<ul>
  <li><img src="tiret.png" />element</li>
</ul>

Autrement, il y a peut-être moyen de jouer avec le css (mais je ne suis pas certains de la compatibilité avec tous les navigateurs)

li{
    list-style-position: inside;
}

En tout les cas, si tu ne sais pas quels éléments débutent tes lignes ou lesquels finissent tes lignes (en gros, si la page (ou ton bloc de menu) n'a pas une largeur fixe), ce sera difficile (impossible ?) d'obtenir un tel rendu sans script (et encore !)

Peut-être que d'autres auront de meilleures idées. Bonne chance !

Le problème d'ajouter des tirets/puces entre les éléments c'est que je ne sais pas où il ne faut pas en mettre (je ne veux pas avoir une ligne qui se termine par un tiret et les éléments continuent dessous, ni qu'une ligne commence par un tiret...)

Autre problème, ajouter des tirets "manuellement", alors autant ne pas faire de liste et tout écrire à la suite, ca serait peut être même plus efficace au niveau accessibilité...

Enfin bref, je patauge...

Salut,
il y a bien une pseudo classe css :last-child et first-child (pas sure que ça soit IE compatible) mais dans ton cas il faudrait que tu fasse une nouvelle liste par ligne de mots pour que ça fonctionne.

Tu peux aussi utiliser :before ou :after pour appliquer un tiret avant ou après chaque li (quoique dans le cas 'avant' autant utiliser les puces) et combiner avec last-child.

Sinon des class appliquées aux premiers et derniers éléments (genre class "nopuce") si tu sais à l'avance quels mots sont à la fin/début de ligne (et si personne n'agrandit le texte).

Un autre détail, la mise en forme que tu proposes s'apparente plus à un tableau de mots qu'a une liste, ça serait peut être plus simple en utilisant un tableau du coup.
A toi de voir !

C'est un exercice pour un cours ou pour application réelle ?

Car si c'est pour application réelle, il y a moyen de faire légèrement différent; ou sinon d'utiliser du JS pour générer les puces aux bons endroits par exemple.

Voici un élément de réponse / voie à explorer:

1) créer deux class pour les balises <li>. Une avec puce et l'autre sans
2) créer un JS qui va détecter la position du <li>.
si celui-ci est le premier <li> d'une nouvelle ligne, on lui affecte la class sans puce
sinon, on lui affect la class avec puce.

Après, cela dépends du site.
si le nombre d'élement du menu est fixe, je te conseille de faire cela manuellement donc sans le JS, par contre si le nombre d'élement est variable (script wordpress par exemple), oui le JS semble la seule solution.

@Vaxilart : C'est pour une application réelle.

@mamax : euh d'accord, mais il y a un moyen en javascript de savoir où se trouve l'élément sur une ligne ?

Je crois que ça marcherais avec ça:

document.getElementById('tonconteneur').offsetWidth

Ensuite, tu regarde combien de <li> entrent dans la valeur retourné, et tu génère une puce via JS pour les éléments qui suivront la première de la ligne.