web-dev-qa-db-fra.com

Un espace entre les éléments de la liste de blocs en ligne

Duplicate possible:
Marge indésirable dans les éléments de liste inline-block
Comment supprimer “espace invisible” de HTML

Pourquoi les éléments de la liste de blocs en ligne ont-ils un espace? Peu importe la façon dont je transforme mes éléments de liste en menu, je trouve toujours des espaces.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
htmlcssxhtml
165
Tyler Crompton

J'ai vu cela et j'ai déjà répondu à cela:

Après recherche ultérieure j'ai découvert que inline-block est une méthode dépendante des espaces et dépend du paramètre de police. Dans ce cas, 4px est rendu.

Pour éviter cela, vous pouvez exécuter tous vos lis ensemble sur une seule ligne, ou bloquer les balises de fin et commencer les balises ensemble comme ceci:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Exemple ici .

Comme mentionné dans d'autres réponses et commentaires, la meilleure pratique pour résoudre ce problème consiste à ajouter font-size: 0; à l'élément parent:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Ceci est préférable pour la lisibilité HTML (éviter d’exécuter les balises ensemble, etc.). L'effet d'espacement est dû au paramètre d'espacement de la police. Vous devez donc le réinitialiser pour les éléments insérés et le redéfinir pour le contenu situé à l'intérieur.

244
Kyle

Solution:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Vous devez définir la taille de la police parente sur 0

167
David Horák

J'ajouterais la propriété CSS de float left, comme indiqué ci-dessous. Cela supprime l'espace supplémentaire.

ul li {
    float:left;
}
18
Trevor G

En réalité, ceci n'est pas spécifique à display:inline-block, mais s'applique également à display:inline. Ainsi, en plus de la solution de David Horák, cela fonctionne aussi:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}
17
Gerbus

Une autre solution, similaire à solution de Gerbus , mais cela fonctionne également avec le dimensionnement relatif des polices.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}
5
Leo Pitt

J'ai eu le même problème, quand j'ai utilisé un bloc en ligne sur mon menu, j'avais l'espace entre chaque "li", j'ai trouvé une solution simple, je ne me souviens pas où je l'ai trouvé, en tout cas voici ce que j'ai fait.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

Vous ajoutez un signe de commentaire entre chaque fin et début de: "li" Puis l'espace horizontal disparaît. J'espère que cette réponse à la question Merci

3
Fabien

supprimez simplement les sauts entre les liens dans votre code html ... faites les liens en une seule ligne ..

2
Mya

Même si elle n’est pas basée sur inline-block, cette solution mérite d’être examinée (permet à peu près le même contrôle de formatage à partir des niveaux supérieurs).

ul {
  display: table;
}
ul li {
  display: table-cell;
}
0
Frosty Z