Distribution égale du padding dans un menu CSS horizontal

Salut tout le monde,

J'essaye de coder un menu horizontal en css avec les conditions suivantes :
- Pas de javascript
- Fonctionne sur les navigateurs récents et IE8+
- Pas de taille spécifiée pour chaque élément
- Premier élément collé à gauche
- Dernier élément collé à droite
- Pas d'espace entre les éléments
- Même espace entre les mots (donc même padding pour chaque élément)

Le résultat attendu serait quelque chose comme ça, sauf que la taille des mots serait variable :
http://img4.hostingpics.net/pics/621556menu.jpg

Voici le html de base :

<ul id="menu">
    <li>Breadfruit</li>
    <li>Bilberry</li>
    <li>Blackberry</li>
    <li>Blackcurrant</li>
    <li>Blueberry</li>
    <li>Boysenberry</li>
    <li>Cantaloupe</li>
    <li>Currant</li>
    <li>Cherry</li>
</ul>

Et le CSS de base :

*{margin:0;padding:0;list-style:none;}
#menu{width:960px;}
#menu li{padding:10px 0;text-align:center;color:white;background:#000;cursor:pointer;}
#menu li:hover{color:#000;background:#ccc;}

Pour l'instant, la meilleure solution que j'ai pu trouver consistait à ajouter "display:table" au <ul> et "display:table-cell;width:1%;" aux <li>. Ça marche parfaitement sur les navigateurs récents, mais sur IE ça merde : l'espace entre chaque mot n'est pas le même (cf Fiddle : http://jsfiddle.net/9kw92/1/[/url).

J'ai également essayé les choses suivantes, sans succès :
- "float:left" et tailles spécifiées sur les <li> : ça marche, mais ce n'est pas flexible. Si les mots changent, le style est cassé.
- "display:inline-block;padding:10px;" sur les <li> et "text-align:center" sur le <ul> : le premier élément n'est pas collé à gauche et le dernier élément n'est pas collé à droite.
- Flexbox ne fonctionne pas sur IE8

Quelqu'un aurait une idée pour me sortir de là ? En espérant que ce soit possible

Merci d'avance !
Modifié par Bed (16 Jan 2014 - 10:46)

Salut,

Est-ce que ceci répond à tes attendes :

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
}

Gili a écrit :
Est-ce que ceci répond à tes attendes :

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
}

Malheureusement non : la propriété "table-layout:fixed;" permet à chaque "li" d'avoir exactement la même largeur, mais il n'y a alors pas le même espace entre chaque mot (ou autrement dit, chaque "li" n'a pas le même padding).
Merci quand même !

Bonsoir,
un fake flex-justify basé sur du inline-block, pseudo et text-align peut t'aider pour IE8 : http://codepen.io/gc-nomade/pen/jsGzK ici le pseudo augmente la zone d'affichage et maintient le hover

version outline sans pseudo pour IE8 et moins http://codepen.io/gc-nomade/pen/GcmeI
dans les deux exemple , le premier menu est en display:flex et le second avec le text-align:justify vielle methode