[CSS]Utilisation de display:table pour un menu

Le menu

• Lien #1
• Lien #2
• Lien #3
• Lien #4
• Lien #5
• Lien #6

Double cliquez sur les cases du menu pour les faire disparaître et voir comment se réorganise le menu.

La structure de base

Utilisation de display:table pour la réalisation d'un menu sur base de la structure HTML suivante :

<ul id="menu">
    <li><a href="#"><img src="image_lien_1" alt=""><span>Lien #1</span></a></li>
    <li><a href="#"><img src="image_lien_2" alt=""><span>Lien #2</span></a></li>
    <li><a href="#"><img src="image_lien_3" alt=""><span>Lien #3</span></a></li>
    <li><a href="#"><img src="image_lien_4" alt=""><span>Lien #4</span></a></li>
    <li><a href="#"><img src="image_lien_5" alt=""><span>Lien #5</span></a></li>
    <li><a href="#"><img src="image_lien_6" alt=""><span>Lien #6</span></a></li>
  </ul>

Le CSS minimum

#menu{
  display:table;
  width: 100%;
}
#menu li{
  display:table-cell;
}
#menu img{
  display:block;
}
#menu span{
  display:block;
}

Ressources

Ce que dit la spécification : [CSS2] The 'display' property