Forum : Espace entre les <li>

Bonjour à tous. J'ai un petit soucis dans ma liste

que j'utilise pour faire mon menu. Le soucis vient du fait que si, dans mon code (je travail avec NetBean) je met un retour à la ligne entre mes - , pour clarifier mon code, je me retrouve avec un espace que, même avec firebug, je n'arrive pas à identifier. Voici mon menu HTML [code]

<input type="radio" id="radio_accueil" name="radio_menu" checked><label for="radio_accueil" id="a_accueil"><img src="css/images/home.png">ACCUEIL</label>
<input type="radio" id="radio_infra" name="radio_menu"><label for="radio_infra" id="a_infra">INFRASTRUCTURE</label>
<input type="radio" id="radio_appli" name="radio_menu"><label for="radio_appli" id="a_appli">APPLICATIONS</label>
<input type="radio" id="radio_suivi" name="radio_menu"><label for="radio_suivi" id="a_suivi">SUIVI</label>
<input type="radio" id="radio_demos" name="radio_menu"><label for="radio_demo" id="a_demos">DEMOS</label>
<input type="radio" id="radio_contact" name="radio_menu"><label for="radio_contact" id="a_contact">CONTACT</label>
[/code] Est le résultat est visible à l'adresse [url=www.nuapp.fr]www.nuapp.fr[/url]. On constate bien que lorsque je passe mon mon curseur entre ACCUEIL et INFRASTRUCTURE les fond gris sont côte à côte (si on regarde le code, je ne suis pas revenu à la ligne à la fin de la balise
de ACCUEIL); alors que les autres menus ont un espace blanc entre deux. J'ai pourtant mis des padding margin line-height à 0, mais là je ne vois pas. Suis-je obligé de mettre toute mes - sur la même ligne?

5 réponses

jaa09,

il y a 14 ans

sa met deja arriver, essai de faire:

<ul id="menu">
    <li><input type="radio" id="radio_accueil" name="radio_menu" checked /><label for="radio_accueil" id="a_accueil"><img src="css/images/home.png" />ACCUEIL</label></li><!--
--><li><input type="radio" id="radio_infra"name="radio_menu"><label for="radio_infra" id="a_infra">INFRASTRUCTURE</label></li><!--
     --><li><input type="radio" id="radio_appli"name="radio_menu" /><label for="radio_appli" id="a_appli">APPLICATIONS</label></li><!--
     --><li><input type="radio" id="radio_suivi"name="radio_menu" /><label for="radio_suivi" id="a_suivi">SUIVI</label></li><!--
     --><li><a href='http://www.demo.nuapp.fr' title='Démonstration'><input type="radio" id="radio_demos"name="radio_menu" /><label for="radio_demo" id="a_demos">DEMOS</label></a></li><!--
     --><li><input type="radio" id="radio_contact"name="radio_menu" /><label for="radio_contact" id="a_contact">CONTACT</label></li>
</ul>

ps: je viens de tester avec firebug et sa marche :)

Ou alors a la place de display:inline sur tes li essais plutot avec un float:left

Wyllou,

il y a 14 ans

Bonne idée, mais ça ne fonctionne pas.
Ma liste est dans une balise <nav> avec le logo <img> puis la liste <ul>

<nav>
    <img>
    <ul>
    </ul>
</nav>

Du coup le float left me regroupe tout à gauche.
Le commentaire ne fonctionne pas non plus :(

jaa09,

il y a 14 ans

moi quand je fais sa:

#menu li {
    float: left;
    line-height: 0;
    margin: 0;
    padding: 0;
}

via firebug sa marche, apres ya juste a regler le margin-top etc...

sinon sur tes li as tu essayer de mettre un margin-left:-5px; ou alors position:relative; left:-5px;

Wyllou,

il y a 14 ans

Ahhh la looz!
Ca fonctionne pas sous chrome enfait :'(

Wyllou,

il y a 14 ans

Au passage, c'est le même délire entre le logo et le menu accueil.
Quand je colle tout, il n'y a plus d'espace blanc entre les 2.

<a href="http://www.nuapp.fr">
                    <img src='css/images/logo.png' alt='logo Nuapp'/></a><ul id="menu"> ...etc