Meilleur moyen de gérer les espaces entre les éléments de liste en ligne

Question

Mon code HTML est le suivant:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

Et mon css:

#nav {
    display: inline;
}

Cependant, les espaces entre les li apparaissent. Je peux supprimer les espaces en les réduisant comme suit:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

Mais cela se maintient en grande partie à la main et je me demandais s’il existait une méthode plus propre.

Answer 1

Plusieurs options ici, tout d’abord, je vais vous expliquer ma pratique habituelle lors de la création de listes en ligne:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Ensuite, le CSS pour le faire fonctionner comme vous le souhaitez:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Évidemment, j’ai omis les survols et les ensembles actifs, mais cela crée une belle navigation au niveau des blocs et constitue une méthode très courante pour le faire tout en respectant les normes. / * n'oubliez pas de modifier à votre guise, d'ajouter de la couleur à l'arrière-plan, etc. * /

Si vous souhaitez le conserver uniquement avec du texte et juste en ligne, aucun élément de bloc, je pense que vous voudriez ajouter:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Vous réalisez que vous souhaitez SUPPRIMER les espaces, ajustez simplement les marges / marges en conséquence.

Answer 2

Un autre moyen utile d'éliminer les espaces blancs consiste à définir la propriété font-size de la liste sur 0 et celle des éléments de la liste à la taille requise.

Answer 3

Ce que vous voulez vraiment, c'est le CSS3 white-space-collapse: jeter . Mais je ne suis pas sûr que des navigateurs supportent réellement cette propriété.

Une ou deux solutions alternatives sont de laisser l’espace vide à la fin de la balise. Par exemple:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

Une autre chose que j'ai constatée consiste à utiliser des commentaires HTML pour utiliser des espaces

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

Voir la solution de thismat si vous utilisez les flottants, et en fonction des besoins, vous devrez peut-être ajouter un <li> final suivi de clear: both;.

Mais la propriété CSS3 est probablement la meilleure manière théorique.

Answer 4

Une meilleure solution pour les éléments de liste consiste à utiliser:

#nav li{float:left; width:auto;}

A exactement le même effet visuel sans le mal de tête.

Answer 5

Adoptez du code HTML non XML et omettez </li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Définissez ensuite la propriété display des éléments sur inline-block au lieu de inline.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 6

Le problème est la taille de la police dans l'UL. Définissez-le sur 0 et il disparaîtra, mais vous ne voulez pas que votre texte soit trop petit. Réglez donc la taille de la police LI sur ce que vous souhaitez.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Answer 7

J'ai eu le même problème et aucune des solutions ci-dessus ne pouvait le résoudre. Mais j'ai découvert que ça marche pour moi:

Au lieu de ceci:

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

construisez votre code HTML comme ceci (les espaces avant et après le texte du lien):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

Answer 8

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>