Étendre uniformément les liens sur une navigation horizontale

J'essaie de trouver une méthode simple de récupérer tous les liens étendre uniformément sur la navigation horizontale.
Ce serait très facile si il serait d'un montant fixe de liens, mais ils vont être dynamique.

De sorte qu'il pourrait être 5 ou 10 liens, personne ne le sait. Malgré la quantité de liens que j'aimerais qu'ils répartis de manière uniforme sur la navigation sans à l'aide d'un tableau.

La raison pour laquelle je ne veux pas utiliser un tableau est parce qu'il va casser l'UL LI structure qui est (apparemment) considéré comme la voie à suivre lors de la construction d'un système de navigation (SEO).

Voici un jsFiddle l'expliquer plus en profondeur: http://jsfiddle.net/pkK8C/19/

La recherche de la plus lumière méthode.

Vous en remercie d'avance.

source d'informationauteur Rick Kuipers

  1. 7

    Utilisation display: table pour UL et display: table-cell pour LI. Et affichage de la table.htc pour IE6/7, si elles sont importantes.

  2. 8

    Vieux navigateur peut être un mal de tête, mais il fonctionne pour les nouveaux:

    div#navigation ul {
    list-style-type:none;
    height:30px;
    text-align:center;
    width: 100%;      /* new */
    display: table;   /* updated */
}

div#navigation ul li {        
    margin-left:50px;
    display: table-cell;  /* updated */  
}
  3. 3

    Ici est un jQuery solution qui se propage uniformément les liens à 100% de la confiner l'élément.
    Gauche et de Droite des liens sont en butée à l'extrémité.

    jQuery:

    pad_menu() augmente de remplissage jusqu'à ce que le dernier li flotte au-dessous de la première
    ensuite les diminutions de rembourrage par un, de sorte que le dernier li est de retour sur la même ligne.
    var j'arrête la boucle infinie (ce qui ne devrait jamais se produire de toute façon).

      $(document).ready(function(){
    pad_menu();
  });

  function pad_menu() {
    var i = 0;
    var pos_first;
    var pos_last;
    var pad = $('#menu li').css('padding-left').replace(/[px]/, '');

    do {
      pad++;
      $('#menu li').css('padding-left', pad);
      $('#menu .first-item').css('padding-left', 0);
      $('#menu .last-item').css('padding-left', 0);
      pos_first = $('#menu .first-item').position();
      pos_last = $('#menu .last-item').position();
    } while (pos_first.top == pos_last.top && ++i < 100)
    $('#menu li').css('padding-left', pad-1);
    $('#menu li.first-item').css('padding-left', 0);
    $('#menu li.last-item').css('padding-left', 0);
  }

    HTML & CSS:

    ul#menu li {
display: inline;
float: none;
padding: 5px 0px 5px 20px;
}
ul#menu li.first-item, ul#menu li.last-item {
padding-left: 0px;
}

<ul id='menu' class='cols'>
  <li class='first-item'><a href='page1.html'>Page 1</a>
  <li><a href='page2.html'>Page 2</a></li>
  <li><a href='page3.html'>Page 3</a></li>
  <li><a href='page4.html'>Page 4</a></li>
  <li><a href='page5.html'>Page 5</a></li>
  <li><a href='page6.html'>Page 6</a></li>
  <li><a href='page7.html'>Page 7</a></li></a></li>
  <li class='last-item'></li>
</ul>
  4. 2

    Il y a une meilleure solution, lorsque vous utilisez des text-align:justify:

    Comment j'ai *vraiment* justifier un menu horizontal en HTML+CSS?

    Lire la accepté de répondre avec soin si, les restrictions suivantes s'appliquent:

    • Espaces dans votre LI texte doit être remplacé par &ensp; ou ils vont
      être comptés comme des espaces entre vos des éléments logiques (&nbsp; n'est pas
      travail)
    • Vous avez besoin d'avoir des espaces dans votre code HTML entre votre LIs (peut
      être un piège si vous êtes à la génération d'une boucle PHP.