Comment se débarrasser de l'espace blanc entre les éléments de la liste horizontale css? [dupliquer]

https://stackoverflow.com/questions/3043707

27-09-2019
|

Question

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

Pourquoi est-il un écart entre ces inexplicables inline- bloquer div éléments 6 réponses
Comment puis-je supprimer l'espace entre les éléments inline-block? 38 réponses

J'ai la page de test suivant et css. Lorsqu'elle est affichée, il y a un écart entre 4px chaque élément de la liste. Comment puis-je obtenir les éléments à côté de l'autre?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

Le code CSS:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}

La solution

Vous devez utiliser display:block et float:left sur les lis pour supprimer l'espace. Quand ils sont en ligne les traite navigateur comme les mots, et ainsi de l'espace de feuilles entre les deux.

Voir aussi mon question similaire.

Autres conseils

Combiner @Skilldrick et @teedyay et vous avez votre réponse et l'explication.
Si <li>s sont traités comme des mots que tout espace blanc autour d'eux est condensé à un espace.

Je suppose que cela est une fonctionnalité qui ressemble à un bug.

Pour supprimer l'espace soit mettre tous vos <li>s dans une chaîne sans espace entre eux.
OU
Réduire la taille de la police sur la <ul> à 0 et restaurer la taille des <li>s

Vous pouvez également définir font-size:0 pour la balise <ul>.

Je crains que c'est sale aussi, mais je serai (agréablement) surpris s'il y a une solution propre à cela.

Mettez tous vos <li>s sur une seule ligne:

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

Désolé.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow