Un espace entre les éléments de la liste en ligne-bloc [dupliquer]

cette question a déjà une réponse ici:

  • Comment supprimer l'espace entre les éléments en ligne-bloc? 35 réponses

possible Duplicate:

marge non désirée dans les éléments de la liste en ligne-bloc

comment supprimer" Invisible space "de HTML

pourquoi les éléments de la liste en ligne-Bloc ont-ils une place? Peu importe comment je fais mes articles de liste dans un menu, j'obtiens toujours des espaces. 

css lang-css prettyprint-override">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>
161
demandé sur Tyler Crompton 2011-03-10 10:08:23

8 réponses

j'ai vu ceci et j'ai répondu dessus avant:

après d'autres recherches j'ai découvert que inline-block est un méthode dépendante de whitespace et dépend de la police de caractères. Dans ce cas 4px est rendu.

Pour éviter cela, vous pourriez courir votre li s ensemble en une ligne, ou bloc les étiquettes d'extrémité et les étiquettes de début 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 est d'ajouter font-size: 0; à l'élément parent: 

ul {
    font-size: 0;
}

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

c'est mieux pour la lisibilité HTML (en évitant d'exécuter les tags ensemble etc). L'effet d'espacement est dû au paramètre d'espacement de la police, vous devez donc la Réinitialiser pour les éléments inlinés et la Réinitialiser pour le contenu. dans.

239
répondu Kyle 2014-12-01 09:36:41

Solution: 

ul {
    font-size: 0;
}

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

vous devez définir la taille de police de parent à 0

167
répondu David Horák 2013-11-19 17:53:10

j'ajouterais la propriété CSS de float left comme vu ci-dessous. Qui se débarrasse de l'espace supplémentaire. 

ul li {
    float:left;
}
18
répondu Trevor G 2013-11-19 17:53:41

en fait, 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
répondu Gerbus 2014-08-16 14:17:47

une autre solution, similaire à solution de Gerbus , mais cela fonctionne également avec le dimensionnement relatif de police. 

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}
5
répondu Leo Pitt 2017-05-23 11:47:09

j'ai eu le même problème, quand j'ai utilisé un bloc-inline sur mon menu j'ai eu l'espace entre chaque" li " j'ai trouvé une solution simple, Je ne me souviens pas où je l'ai trouvé, de toute façon 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 extrémité de, et le début de : "li" Puis l'espace horizontal disparaît. Espérons que la réponse à la question Merci

3
répondu Fabien 2016-07-01 04:53:48

il suffit de supprimer les ruptures entre les li dans votre code html... fais les li en une seule ligne..

2
répondu Mya 2012-10-11 09:40:28

même si elle n'est pas basée sur inline-block , cette solution pourrait valoir la peine d'être considérée (permet à peu près le même contrôle de formatage des niveaux supérieurs). 

ul {
  display: table;
}
ul li {
  display: table-cell;
}
0
répondu Frosty Z 2013-12-23 10:55:32