Disposer de sauts de ligne entre < li > s

Question

J'ai un menu horizontal composé d'éléments < li > avec display: inline .

Les éléments sont supposés être côte à côte de manière transparente.

Dans le code source, je voudrais avoir chaque li sur une ligne pour faciliter le débogage:

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

Cependant, si j'ajoute un \ n après chaque élément, les éléments de menu ont un espace entre eux. Je suppose que c’est le comportement souhaité, mais existe-t-il un moyen de le désactiver en utilisant un "espace blanc" intelligent? réglage ou quelque chose?

  

Éditer: je ne peux pas utiliser float, cela se trouve dans un CMS avec l'option de centrer les éléments de la liste.

Answer 1

Vous pouvez éviter les problèmes de rendu, mais conservez le code maintenable comme suit:

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

Cela supprime les espaces, mais il est toujours facile de modifier les éléments dans un éditeur de texte, à condition que votre CMS ne dérange pas le balisage que vous entrez!

Answer 2

Avez-vous la possibilité d’éditer le CSS? Si tel est le cas, vous pouvez essayer d’ajuster le remplissage / les marges sur les balises < li > élément. Cela semble être beaucoup d’efforts de lisibilité.

Selon le navigateur que vous utilisez, vous pouvez obtenir le contenu HTML http: //users.skynet .be / mgueury / mozilla / , qui vous donne la possibilité de ranger votre source, ce qui peut être assez utile pour le débogage

Answer 3

CSS + float est votre ami.

Answer 4

HTML est indépendant des espaces - par conséquent, l'ajout de sauts de ligne ne devrait avoir aucun effet. Cependant, les moteurs de rendu de certains navigateurs ne comprennent pas tout à fait cela.

Ce que vous voulez probablement faire, c'est ajouter

float: left;

vers vos balises li pour les rapprocher les unes des autres.