Pb bootstrap, <li>, et tirets

Bonsoir,

J'ai besoin de votre aide concernant plusieurs problèmes ;-/

J'essaye d'afficher 40 noms de ville, chaque nom de ville comporte un lien, je souhaite les afficher les uns à côtés des autres. Le souci est que le retour à la ligne se produit avec les noms incluant des tirets. exemple : LA ROCHE-SUR-YON.

J'encadre les villes avec des liens <a> ou même des <li>, le problème est le même, jamais de retour à la ligne sauf avec les noms avec des -.

Par la même occasion j'ai ensuite mis tous ces noms dans une div bootstrap, car je souhaite une redimension quand je réduis la fenêtre, cela ne fonctionne pas.

<div class="container"><div class="row"><div class="col-lg-12e">

Je me suis apperçu en faisant un copier coller sur ce forum que mes noms de villes sont attachés, c'est peut-etre le probleme : exemple :

ANNECYCOURBEVOIEPESSACLA ROCHE-SUR-YONROUENMONTPELLIERROUBAIXNARBONNELILLEBRESTIVRY-SUR-SEINEGRASSETROYESVANNESCHAMPIGNY-SUR-MARNEISSY-LES-MOULINEAUXRUEIL-MALMAISONSAINT-PIERRECLAMARTMAISONS-ALFORT

Alors que mon code quand j'affiche la source :

<li class="random_ville_bouton"><a href="">Annecy</a></li><li class="random_ville_bouton"><a href="">Courbevoie</a></li><li class="random_ville_bouton"><a href="">Pessac</a></li><li class="random_ville_bouton"><a href="">La Roche-sur-Yon</a></li><li class="random_ville_bouton"><a href="">Rouen</a></li>

Merci d'avance pour votre aide
Nicolas

... je viens de penser à mettre &nbsp dans la boucle afin d'obtenir des espaces entre chaque ville. J'ai cette fois-ci bien des espaces mais toujours les mêmes problèmes.

Hello,

Pourrais-tu copier ton code CSS stp ? A moins que tu n'utilises que le css de bootstrap, sinon si j'ai bien compris tu souhaites afficher :

ANNECY COURBEVOIE PESSAC LA ROCHE-SUR-YON ROUEN MONTPELLIER ROUBAIX ...

Le tout en ligne ?

1ere proposition ajouter un espace après le nom de tes villes

<li class="random_ville_bouton"><a href="">La Roche-sur-Yon </a></li>

Etant donné qu'elle s'affiche toute sur la même ligne dés que tu as un tiret il croit que c'est un pavé de 2 lignes

2ème proposition

Ajoute ces deux règles à tes <li>

li {
 list-style : none;
}
li > a{
  display : block;
}

Après je dis ça à brûle pour point, le meilleur c'est que tu link ton CSS
Modifié par GameTag (14 Dec 2014 - 16:54)

Bonsoir GameTag,

Je te remercie pour ta réponse, effectivement je souhaite afficher les villes ainsi, en inline.
L'espace brut ne fonctionne pas, j'ai inséré un &nbsp; ainsi un espace est existant entre chaque ville mais aucun effet.

Mais les retours à la ligne sont à chaque fois déclenchés par les tirets.

Voici mon css :

li
{
list-style : none;
display : inline;
padding: 3px;
margin-right:4px;
border: none;
border-radius: 4px;
box-shadow: 0px 3px 0px #579502;
background: #6ebd02;
}


.random_ville  a
{
font-size: 10px;
line-height: 14px;
color: #fff;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
line-height:30px;
}

J'ai essayé ton css block et style none, ce n'est pas bon.

merci d'avance

Ca fonctionne quand j'ajoute

white-space: nowrap;

sur les .a et/ou li, par contre j'ai toute la liste sur une seule ligne sans aucun retour à la ligne même avec un col-md-12

Comment pourrais-je maintenant faire un retour à la ligne en bout de fenêtre
merci pour votre aide

Désolé je n'arrive pas à éditer mes messages.
J'ai réussi !

Au lieu de mettre mes liens ou li en inline, je les mets en block et en foat left

display : block;
float:left;