Comment se débarrasser de l'espace blanc entre les éléments de la liste horizontale css? [dupliquer]
-
27-09-2019 - |
Question
Cette question a déjà une réponse ici:
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 li
s 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é.