CSS - & lt; li & gt; Les éléments du menu horizontal présentent un écart entre eux
La Question
Pour une raison quelconque, les bords droit et gauche de la li éléments ne touchez pas il y a environ 4-5 px d'écart entre eux. Je n'ai aucune idée d'où il vient... j'ai passé une bonne quantité de temps monkeying autour de dans Firebug avec pas de chance...
Le Balisage
<div id="menucontainer">
<ul id="menu">
<li><a href="google.com"></a></li>
<li><a href="google.com"></a></li>
<li><a href="google.com"></a></li>
</ul>
</div>
Le CSS
#menucontainer
{
display: block;
float: left;
width: 100%;
}
ul#menu
{
display: block;
padding: 5px 0px 5px 15px;
}
ul#menu li
{
display: inline;
padding: 3px;
border-right: 1px solid #D8D6FF;
border-left: 1px solid #D8D6FF;
margin: 0 !important;
}
ul#menu li a
{
padding: 3px;
margin:0;
}
D'Autres Info
Je suis en utilisant le 960 système de grille CSS reset (qui ne semble pas changer ma question/w ou w/o). J'ai besoin d'obtenir ce travail dans IE 7+ et Firefox - Problème existe dans IE8 et FF.
source d'informationauteur Jason
Vous devez vous connecter pour publier un commentaire.
Vous utilisez
display: inline
. Cela signifie que les espaces entre chacun de cesli
éléments sont respectés, et seront regroupées dans un seul espace. Si vous le souhaitez, vous pouvez essayer d'utiliserfloat
s au lieu de cela, ou de supprimer tous les espaces entre les éléments.ou si vous êtes enclin à l'aide de flotteurs,
au lieu de
display: inline
À suivre à partir de Yi Jiang solution:
assure que vous vraiment n'ont pas d'espace blanc. Flottant à gauche peuvent causer des problèmes dans les menus qui ont un roulement
a:hover
.